/* ============================================================
   TEAM FOCADOS ACADEMIA — Design Tokens
   Source: DESIGN_DNA.json (July 2026)
   Import FIRST in index.html, before any other stylesheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,700;1,800;1,900&family=Inter:wght@400;500;600&display=swap');

:root {

  /* ── COLORS ──────────────────────────────────────────────── */

  /* Base */
  --ink:          #0A0A0A;
  --ink-deep:     #000000;
  --white:        #FFFFFF;
  --paper:        #FAFAFA;

  /* Surfaces (elevation stack) */
  --surface-0:    #111111;   /* card bg */
  --surface-1:    #1A1A1A;   /* mid — hover bg, input bg */
  --surface-2:    #252525;   /* high — tooltips, popovers */
  --smoke:        #2E2E2E;   /* borders, dividers, strokes */

  /* Brand Gold */
  --gold:         #F0B429;
  --amber:        #E6A817;
  --orange:       #FF7A00;   /* gradient start */
  --gold-light:   #FFC02E;   /* gradient end */

  /* Semantic */
  --text-primary:   var(--white);
  --text-secondary: var(--paper);
  --text-muted:     rgba(250,250,250,0.5);
  --text-accent:    var(--gold);
  --border-default: var(--smoke);
  --border-subtle:  rgba(255,255,255,0.06);
  --border-gold-thin: rgba(240,180,41,0.30);
  --border-gold-med:  rgba(240,180,41,0.60);

  /* ── GRADIENTS ───────────────────────────────────────────── */

  --grad-brand:     linear-gradient(135deg, #FF7A00 0%, #FFC02E 100%);
  --grad-gold-glow: radial-gradient(ellipse at center, rgba(240,180,41,0.25) 0%, transparent 70%);
  --grad-hero-veil: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,168,23,0.12) 0%, #0A0A0A 65%);
  --grad-ink-fade:  linear-gradient(to bottom, transparent 0%, #0A0A0A 100%);
  --grad-border:    linear-gradient(135deg, #FF7A00, #FFC02E);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */

  /* Families */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-utility: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Type Scale — fluid where marked */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  1rem;         /* 16px */
  --text-md:    1.125rem;     /* 18px */
  --text-lg:    1.25rem;      /* 20px */
  --text-xl:    1.5rem;       /* 24px */
  --text-2xl:   2rem;         /* 32px */
  --text-3xl:   2.5rem;       /* 40px */
  --text-4xl:   3.5rem;       /* 56px */
  --text-5xl:   5rem;         /* 80px */
  --text-6xl:   7.5rem;       /* 120px */
  --text-hero:  clamp(4rem, 10vw, 9rem);   /* fluid hero */
  --text-display: clamp(2.5rem, 6vw, 5rem); /* fluid section */

  /* Line Heights */
  --lh-display:  0.9;
  --lh-heading:  1.1;
  --lh-body:     1.65;
  --lh-label:    1.2;

  /* Letter Spacing */
  --ls-hero:    -0.03em;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-label:    0.12em;

  /* ── SPACING (base 8) ────────────────────────────────────── */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;
  --sp-40:  160px;
  --sp-48:  192px;

  /* Layout */
  --section-pad:  clamp(64px, 10vw, 128px);
  --container:    min(1280px, calc(100% - 48px));
  --gutter:       clamp(16px, 4vw, 48px);

  /* ── RADIUS ──────────────────────────────────────────────── */

  --r-none:   0px;
  --r-sm:     2px;
  --r-base:   4px;
  --r-card:   8px;
  --r-pill:   999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */

  --shadow-gold-glow:   0 0 40px rgba(240,180,41,0.25);
  --shadow-gold-strong: 0 0 80px rgba(255,122,0,0.35);
  --shadow-card:        0 4px 24px rgba(0,0,0,0.60);
  --shadow-card-hover:  0 8px 40px rgba(0,0,0,0.80), 0 0 0 1px rgba(240,180,41,0.30);
  --shadow-cta-glow:    0 0 48px rgba(255,122,0,0.40), 0 0 16px rgba(255,192,46,0.30);

  /* ── MOTION ──────────────────────────────────────────────── */

  /* Easings */
  --ease-power:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-snap:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate: cubic-bezier(0.00, 0.00, 0.20, 1);
  --ease-standard:   cubic-bezier(0.40, 0.00, 0.20, 1);

  /* Durations */
  --dur-instant:  100ms;
  --dur-fast:     200ms;
  --dur-medium:   450ms;
  --dur-slow:     700ms;
  --dur-reveal:   600ms;
  --dur-counter:  1200ms;
  --dur-marquee:  30s;

  /* Stagger steps */
  --stagger-word: 80ms;
  --stagger-card: 120ms;
  --stagger-stat: 150ms;

  /* ── BORDERS ─────────────────────────────────────────────── */

  --border-hairline: 1px solid rgba(255,255,255,0.06);
  --border-smoke:    1px solid #2E2E2E;
  --border-gold-t:   1px solid rgba(240,180,41,0.30);
  --border-gold-m:   1px solid rgba(240,180,41,0.60);
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:  0ms;
    --dur-fast:     0ms;
    --dur-medium:   0ms;
    --dur-slow:     0ms;
    --dur-reveal:   0ms;
    --dur-counter:  0ms;
    --dur-marquee:  0s;
  }
}