/* IA Futura — Component System v1
   Reusable classes. Drop into any project; no framework required. */

:root {
  --iaf-midnight: #0A0E1A;
  --iaf-bone: #FAFAF7;
  --iaf-cyan: #00E5FF;
  --iaf-cyan-light: #5CF1FF;
  --iaf-cyan-dark: #00B8CC;
  --iaf-coral: #FF6B35;
  --iaf-coral-light: #FF8A5C;
  --iaf-amber: #FFB627;
  --iaf-steel: #3D5A80;
  --iaf-g900: #13182A;
  --iaf-g800: #1F2438;
  --iaf-g700: #2D3349;
  --iaf-g500: #6B7280;
  --iaf-g300: #D1D5DB;
  --iaf-g100: #F3F4F6;
  --iaf-success: #10B981;
  --iaf-error: #EF4444;
  --iaf-info: #3B82F6;

  --iaf-font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --iaf-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --iaf-radius-sm: 4px;
  --iaf-radius-md: 8px;
  --iaf-radius-lg: 12px;
  --iaf-radius-xl: 16px;

  --iaf-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --iaf-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --iaf-shadow-glow: 0 0 0 4px rgba(0,229,255,0.18);

  --iaf-transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* ---------- BUTTONS ---------- */
.iaf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--iaf-font-sans); font-weight: 600;
  letter-spacing: -0.01em; border: none; cursor: pointer;
  border-radius: var(--iaf-radius-md);
  transition: all var(--iaf-transition);
  text-decoration: none; user-select: none; white-space: nowrap;
}
.iaf-btn:focus-visible { outline: none; box-shadow: var(--iaf-shadow-glow); }
.iaf-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.iaf-btn--sm { padding: 8px 16px; font-size: 13px; }
.iaf-btn--md { padding: 12px 24px; font-size: 15px; }
.iaf-btn--lg { padding: 16px 32px; font-size: 17px; }

.iaf-btn--primary {
  background: var(--iaf-cyan); color: var(--iaf-midnight);
}
.iaf-btn--primary:hover {
  background: var(--iaf-cyan-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,229,255,0.25);
}
.iaf-btn--primary:active { transform: translateY(0); }

.iaf-btn--secondary {
  background: transparent; color: var(--iaf-cyan);
  border: 2px solid var(--iaf-cyan);
}
.iaf-btn--secondary:hover {
  background: var(--iaf-cyan); color: var(--iaf-midnight);
}

.iaf-btn--coral {
  background: var(--iaf-coral); color: var(--iaf-bone);
}
.iaf-btn--coral:hover {
  background: var(--iaf-coral-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,107,53,0.3);
}

/* ---------- CARDS ---------- */
.iaf-card {
  border-radius: var(--iaf-radius-lg);
  padding: 24px;
  transition: all var(--iaf-transition);
}
.iaf-card--dark {
  background: var(--iaf-g900);
  border: 1px solid var(--iaf-g700);
  color: var(--iaf-bone);
}
.iaf-card--dark:hover { border-color: var(--iaf-steel); transform: translateY(-2px); }

.iaf-card--light {
  background: var(--iaf-bone);
  border: 1px solid var(--iaf-g300);
  color: var(--iaf-midnight);
}
.iaf-card--light:hover { border-color: var(--iaf-steel); transform: translateY(-2px); }

.iaf-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,229,255,0.12); color: var(--iaf-cyan);
  border-radius: var(--iaf-radius-md);
  margin-bottom: 16px;
}
.iaf-card__title {
  font-size: 18px; font-weight: 600; margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.iaf-card__body { font-size: 15px; line-height: 1.55; color: var(--iaf-g500); margin: 0; }
.iaf-card--dark .iaf-card__body { color: var(--iaf-g300); }

/* ---------- BADGES ---------- */
.iaf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--iaf-font-mono); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--iaf-radius-sm);
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1;
}
.iaf-badge--tech {
  border: 1px solid var(--iaf-cyan); color: var(--iaf-cyan); background: transparent;
}
.iaf-badge--live {
  background: var(--iaf-coral); color: var(--iaf-bone);
}
.iaf-badge--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--iaf-bone); animation: iaf-pulse 1.6s ease-in-out infinite;
}
@keyframes iaf-pulse { 50% { opacity: 0.4; } }

.iaf-badge--beta {
  border: 1px solid var(--iaf-amber); color: var(--iaf-amber); background: transparent;
}

/* ---------- METRIC ---------- */
.iaf-metric { display: flex; flex-direction: column; gap: 4px; }
.iaf-metric__value {
  font-family: var(--iaf-font-sans); font-weight: 900;
  font-size: 72px; line-height: 0.95; letter-spacing: -0.04em;
  color: var(--iaf-cyan);
}
.iaf-metric__value--coral { color: var(--iaf-coral); }
.iaf-metric__label {
  font-family: var(--iaf-font-mono); font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--iaf-g500);
}

/* ---------- QUOTE ---------- */
.iaf-quote {
  border-left: 4px solid var(--iaf-cyan);
  padding: 8px 0 8px 24px;
  margin: 0;
}
.iaf-quote__text {
  font-family: var(--iaf-font-sans); font-size: 18px; font-weight: 400;
  line-height: 1.55; color: var(--iaf-bone); margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.iaf-quote--light .iaf-quote__text { color: var(--iaf-midnight); }
.iaf-quote__author {
  font-family: var(--iaf-font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--iaf-g500);
}

/* ---------- INPUT ---------- */
.iaf-input {
  width: 100%;
  background: var(--iaf-g800);
  border: 1px solid var(--iaf-steel);
  color: var(--iaf-bone);
  padding: 12px 16px;
  font-family: var(--iaf-font-sans); font-size: 15px;
  border-radius: var(--iaf-radius-md);
  transition: all var(--iaf-transition);
  outline: none;
}
.iaf-input::placeholder { color: var(--iaf-g500); }
.iaf-input:focus {
  border-color: var(--iaf-cyan);
  box-shadow: var(--iaf-shadow-glow);
}
.iaf-input--light {
  background: var(--iaf-bone); color: var(--iaf-midnight);
  border-color: var(--iaf-g300);
}

.iaf-label {
  display: block; font-family: var(--iaf-font-mono); font-size: 12px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--iaf-g500); margin-bottom: 8px;
}

/* ---------- TAG PILL ---------- */
.iaf-tag {
  display: inline-flex; align-items: center;
  font-family: var(--iaf-font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  background: var(--iaf-g800); color: var(--iaf-g300);
  letter-spacing: 0.02em;
}
.iaf-tag--light { background: var(--iaf-g100); color: var(--iaf-g500); }