/* ========================================================================
   MINIMAL GRAPHICS — DESIGN TOKENS
   Single source of truth. Do not redeclare values outside this file.
   ======================================================================== */

:root {
  /* ───── BRAND SYSTEM — single source of truth for color ─────
     RULES (obligatorias en toda la web):
     • --brand-yellow      → SOLO tipografía principal y jerarquía narrativa.
                             NO usar en botones, bordes activos ni hover.
     • --brand-teal        → Color de acción e interacción: botones, bordes
                             activos, hover, focus, links.
     • --brand-teal-dim    → Variante apagada para estados en reposo.
     • --brand-teal-glow   → Halos y sombras de elementos interactivos.
     • --brand-red-neon    → Acento decorativo escaso. NO en CTAs ni botones.
     • --bg-deep / --bg-card → Superficies. Nada de beige/crema.
     • --text-primary / --text-muted → Toda la copia neutral.            */
  --brand-yellow:    #F2C94C;
  --brand-teal:      #3FE0D0;
  --brand-teal-dim:  #1FA89A;
  --brand-teal-glow: rgba(63, 224, 208, 0.25);
  --brand-red-neon:  #FF3B47;
  --bg-deep:         #0A0A0C;
  --bg-card:         #111114;
  --text-primary:    #EDE3CE;
  --text-muted:      rgba(245, 245, 240, 0.6);

  /* ───── LEGACY TOKEN ALIASES — remapped to brand system ─────
     Existing components reference these names. They now resolve to the
     unified palette, so the change propagates site-wide without
     touching every selector. */

  /* Canvas */
  --color-void:           var(--bg-deep);          /* Primary canvas */
  --color-shadow-teal:    #0E1A1F;                  /* Alternating section bg — 800T shadow cast */
  --color-surface-raised: var(--bg-card);           /* Cards, elevated panels */

  /* Accents — yellow for typography, teal for interaction */
  --color-accent:         var(--brand-yellow);      /* TYPOGRAPHY ONLY — hero / H2 / narrative */
  --color-accent-warm:    var(--brand-yellow);      /* legacy alias */
  --color-accent-glow:    var(--brand-yellow);      /* legacy alias */
  --color-halation:       var(--brand-yellow);      /* legacy alias */
  --color-neon-cyan:      var(--brand-teal);        /* INTERACTION — buttons / hover / borders */
  --color-brake-red:      var(--brand-red-neon);    /* Decorative accent / errors */

  /* Text */
  --color-text-primary:   var(--brand-yellow);      /* Titles over dark surfaces */
  --color-text-secondary: rgba(242, 201, 76, 0.75);
  --color-text-body:      var(--text-primary);      /* Neutral body copy */
  --color-tungsten:       var(--text-primary);      /* legacy alias */
  --color-film-white:     var(--text-primary);      /* legacy alias */
  --color-text-muted:     var(--text-muted);        /* Metadata, ultra-quiet copy */

  /* Border */
  --color-border:         rgba(245, 245, 240, 0.12); /* Hairlines, dividers, input underlines */

  /* ───── ELEVATION ───── */
  --elevation-rest:     none;
  --elevation-hover:    0 0 0 1px rgba(63,224,208,0.40), 0 0 28px var(--brand-teal-glow), 0 0 64px rgba(63,224,208,0.08);
  --elevation-focused:  0 0 0 1px var(--brand-teal), 0 0 32px var(--brand-teal-glow);
  --elevation-featured: 0 0 0 1px rgba(63,224,208,0.35), 0 0 30px var(--brand-teal-glow);
  --elevation-ambient:  0 40px 80px -20px rgba(0,0,0,0.5);

  /* ───── MOTION ───── */
  --duration-instant:   150ms;
  --duration-micro:     280ms;
  --duration-base:      480ms;
  --duration-reveal:    720ms;
  --duration-cinematic: 1100ms;

  --easing-film:        cubic-bezier(0.22, 1, 0.36, 1);
  --easing-cinematic:   cubic-bezier(0.16, 1, 0.3, 1);
  --easing-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  --stagger-tight:      60ms;
  --stagger-base:       90ms;
  --stagger-loose:      140ms;

  /* ───── SPATIAL — 8px base grid ───── */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* Containers */
  --container-narrow:  880px;
  --container-default: 1200px;
  --container-wide:    1440px;
  --container-full:    100%;

  /* ───── TYPOGRAPHY STACKS ─────
     Bebas Neue (display) + Inter (body + all UI labels). Loaded from
     Google Fonts in index.html. The previous local Thirsty Script /
     Akira Expanded faces are retired — the --font-script alias is
     pointed at the display stack for any legacy refs. */
  --font-display: 'Bebas Neue', 'Inter', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script:  var(--font-display); /* legacy alias */

  /* ───── FLUID TYPE SCALE ───── */
  --fs-hero:    clamp(80px, 12vw, 180px);   /* H1 hero — Bebas Neue */
  --fs-h2:      clamp(56px, 8vw, 96px);     /* Section H2 — Bebas Neue */
  --fs-h3:      clamp(32px, 4vw, 48px);     /* H3 — Bebas Neue */
  --fs-eyebrow: 12px;                        /* Labels — Inter 500 */
  --fs-body:    16px;                        /* Body — Inter 400 */
  --fs-body-l:  18px;                        /* Body large — Inter 400 */
  --fs-meta:    12px;                        /* Meta info — Inter 500 */

  /* ───── HALATION GLOWS (yellow — for typography only) ───── */
  --glow-soft:   0 0 8px  rgba(242,201,76,0.50), 0 0 18px rgba(242,201,76,0.28);
  --glow-mid:    0 0 10px rgba(242,201,76,0.45), 0 0 22px rgba(242,201,76,0.24), 0 0 48px rgba(242,201,76,0.10);
  --glow-full:   0 0 14px rgba(242,201,76,0.65), 0 0 32px rgba(242,201,76,0.38), 0 0 64px rgba(242,201,76,0.20);
  --glow-hero:   var(--glow-full);
}