/* ════════════════════════════════════════════════════════════════════
   Mundial2026 · Design tokens — M26 Tournament OS
   Editorial sports magazine + Linear. Warm paper + ink + accent rojo
   (regla 10%). Dark default + light toggle.

   Los nombres --bb-* y --ft-* se mantienen como aliases para no romper
   el CSS Tricolor Fiesta mientras F2 reescribe app.css/game-fx.css.
   Se eliminan en F2 cuando ya no quedan referencias.
════════════════════════════════════════════════════════════════════ */

/* ── Light theme ──────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:           #F2EDE0;
  --surface:      #FBF7EC;
  --surface-2:    #FFFFFF;
  --surface-sunk: #ECE5D2;

  --ink:          #0D0D0D;
  --ink-2:        #4A453C;
  --ink-3:        #837C6D;
  --ink-4:        #B5AE9F;

  --line:         #D9D0BA;
  --line-soft:    #E5DDC8;
  --line-strong:  #0D0D0D;

  --red:          #D63A2A;
  --red-soft:     rgba(214, 58, 42, 0.10);
  --green:        #1A5D3A;
  --green-soft:   rgba(26, 93, 58, 0.10);
  --amber:        #C58A00;
  --amber-soft:   rgba(197, 138, 0, 0.12);
  --cream:        #F4ECD3;

  --c-mex:        #006847;
  --c-can:        #D80027;
  --c-usa:        #002868;

  --shadow-card:  0 1px 0 rgba(13,13,13,0.04), 0 8px 24px -16px rgba(13,13,13,0.18);
  --shadow-lift:  0 1px 0 rgba(13,13,13,0.04), 0 16px 36px -20px rgba(13,13,13,0.28);

  color-scheme: light;
}

/* ── Dark theme (default) ─────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0B0B0E;
  --surface:      #131318;
  --surface-2:    #1A1A22;
  --surface-sunk: #07070A;

  --ink:          #F2ECDB;
  --ink-2:        #B8B0A0;
  --ink-3:        #7A7367;
  --ink-4:        #3F3B33;

  --line:         #26262E;
  --line-soft:    #1E1E26;
  --line-strong:  #F2ECDB;

  --red:          #F25744;
  --red-soft:     rgba(242, 87, 68, 0.14);
  --green:        #4DAE7C;
  --green-soft:   rgba(77, 174, 124, 0.14);
  --amber:        #F5C242;
  --amber-soft:   rgba(245, 194, 66, 0.14);
  --cream:        #1F1F28;

  --c-mex:        #2A9D6F;
  --c-can:        #E84A4A;
  --c-usa:        #4A78D9;

  --shadow-card:  0 1px 0 rgba(0,0,0,0.5), 0 12px 32px -16px rgba(0,0,0,0.6);
  --shadow-lift:  0 1px 0 rgba(0,0,0,0.5), 0 20px 48px -20px rgba(0,0,0,0.7);

  color-scheme: dark;
}

/* ── Shared (no varían por tema) ──────────────────────────── */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Radius */
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;

  /* Typography */
  --font-display: 'Big Shoulders Display', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-pop:     cubic-bezier(.34, 1.56, .64, 1);
  --fast:         .15s;
  --medium:       .3s;
  --slow:         .6s;

  /* Z-index */
  --z-header:     100;
  --z-overlay:    500;
  --z-toast:      900;
  --z-modal:      1000;

  /* Layout */
  --max-w:        1480px;
}

/* ════════════════════════════════════════════════════════════════════
   ALIASES DEPRECATED (--bb-*, --ft-*) — eliminar en F2
   Mapean a los nuevos tokens M26 para que el CSS Tricolor Fiesta siga
   funcionando mientras se reescribe.
════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Surfaces */
  --bb-cream:     var(--bg);
  --bb-paper:     var(--surface);
  --bb-ink:       var(--ink);

  /* Accents */
  --bb-maroon:    var(--red);
  --bb-tomate:    var(--red);
  --bb-gold:      var(--amber);
  --bb-cobalt:    var(--c-usa);
  --bb-pasto:     var(--green);
  --bb-rosa:      var(--red);

  /* Fiesta tokens */
  --ft-ink2:      var(--ink-2);
  --ft-ink3:      var(--ink-3);
  --ft-green:     var(--green);
  --ft-red:       var(--red);
  --ft-pink:      var(--red);
  --ft-yellow:    var(--amber);
  --ft-card:      var(--surface);
  --ft-line:      var(--line);
  --ft-line-soft: var(--line-soft);

  /* Holo gradient (prog-fill, modal foil) */
  --bb-holo:      linear-gradient(90deg, var(--red) 0%, var(--amber) 50%, var(--green) 100%);

  /* Player colors */
  --bb-p-dari:    var(--c-usa);
  --bb-p-kmi:     var(--red);
  --bb-p-blopa:   var(--amber);
  --bb-p-pela:    var(--green);

  /* Borders & shadows — softer M26 style */
  --bb-shadow:    var(--shadow-card);
  --bb-shadow-sm: var(--shadow-card);
  --bb-shadow-xs: var(--shadow-card);
  --bb-border:    1px solid var(--line);
  --bb-border-sm: 1px solid var(--line);

  /* States */
  --bb-state-pleno:   var(--green);
  --bb-state-acierto: var(--red);
  --bb-state-miss:    var(--ink-4);
  --bb-state-wo:      var(--red);
  --bb-state-live:    var(--red);

  /* Animation aliases */
  --bb-ease-out:  var(--ease-out);
  --bb-ease-pop:  var(--ease-pop);
  --bb-fast:      var(--fast);
  --bb-medium:    var(--medium);
  --bb-slow:      var(--slow);
  --bb-pulse:     1.6s;
  --bb-confetti:  1.4s;

  /* Z-index aliases */
  --bb-z-header:   var(--z-header);
  --bb-z-overlay:  var(--z-overlay);
  --bb-z-toast:    var(--z-toast);
  --bb-z-confetti: 950;
  --bb-z-modal:    var(--z-modal);

  /* Layout aliases */
  --bb-max-w:     var(--max-w);
  --bb-radius:    var(--radius);
  --bb-radius-sm: var(--radius-sm);
  --bb-radius-lg: var(--radius-lg);

  /* Typography aliases */
  --bb-display:   var(--font-display);
  --bb-modern:    var(--font-body);
  --bb-ui:        var(--font-body);
  --bb-mono:      var(--font-mono);
  --bb-script:    var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast:       0.01s;
    --medium:     0.01s;
    --slow:       0.01s;
    --bb-fast:    0.01s;
    --bb-medium:  0.01s;
    --bb-slow:    0.01s;
    --bb-pulse:   0.01s;
    --bb-confetti: 0.01s;
  }
}