/* ============================================================================
   tokens.css — ÚNICA fuente de tokens del Design System (Gundambay)
   ----------------------------------------------------------------------------
   Consolida los 4 :root que estaban dispersos (style.css, unified-cards.css,
   unified-card-styles.css, deck-photo.css) y agrega las capas que define el DS:
   marca púrpura, alias semánticos, escalas (space/radius/font/shadow/z), focus,
   tipografía display, breakpoints (referencia) y data-viz.

   Reglas: este es el ÚNICO :root del sitio. Ningún otro archivo declara :root.
   Los componentes referencian SOLO alias semánticos (--bg/--surface/--text/--brand…),
   nunca un --surface-900 crudo, para que light (fase 2) sea un re-map y no un rewrite.
   Debe cargarse PRIMERO (sincrónico) en base.html, antes que cualquier otro CSS.
   Ver documents/designs/Design-System.md.
============================================================================ */

:root {
    /* ════════════════════════════════════════════════════════════════════
       1. MARCA — púrpura (DS §2.1). Primario único.
    ════════════════════════════════════════════════════════════════════ */
    --brand:           #667eea;   /* primario (era --section-deck) */
    --brand-strong:    #764ba2;   /* fin del gradiente / hover */
    --brand-gradient:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-soft:      rgba(102, 126, 234, 0.12);  /* fondos sutiles, chips activos */
    --brand-ring:      rgba(102, 126, 234, 0.45);  /* focus / glow */

    /* ════════════════════════════════════════════════════════════════════
       2. PALETA BASE (legacy — preservada para no romper páginas sin migrar)
       Nota DS: estos azules/violetas sueltos se eliminan a medida que cada
       página migra al púrpura de marca. No usar como acento nuevo.
    ════════════════════════════════════════════════════════════════════ */
    /* Colores de carta (dato del dominio Gundam, no acento de marca) */
    --color-red:        #ff6b6b;
    --color-green:      #56ab2f;
    --color-blue:       #4ecdc4;   /* teal-ish */
    --color-purple:     #a040ff;
    --color-yellow:     #f1c40f;
    --color-gray:       #6b7280;
    --color-dark:       #1f2937;
    --color-light:      #f8fafc;
    --color-white:      #ffffff;
    --color-colorless:  #636363;

    /* Variantes (gradient stops) */
    --color-red-dark:        #ee5a52;
    --color-green-light:     #a8e6cf;
    --color-purple-dark:     #7a36bd;
    --color-colorless-light: #a2a2a2;
    --color-white-dim:       #f7f7f7;
    --color-white-shade:     #d4d4d4;

    /* Colores de carta tokenizados (DS §2.5 — pips, filtros, bordes de carta) */
    --card-red:    var(--color-red);
    --card-green:  var(--color-green);
    --card-blue:   var(--color-blue);
    --card-purple: var(--color-purple);
    --card-yellow: var(--color-yellow);

    /* GCG game color system (r=Red g=Green b=Black u=Blue/Purple w=White) */
    --game-r: #ef4444;
    --game-g: #22c55e;
    --game-b: #9ca3af;
    --game-u: #667eea;
    --game-w: #e2e8f0;

    /* Gradientes legacy */
    --gradient-red:    linear-gradient(135deg, var(--color-red)       0%, var(--color-red-dark)        100%);
    --gradient-green:  linear-gradient(135deg, var(--color-green)     0%, var(--color-green-light)     100%);
    --gradient-blue:   linear-gradient(135deg, var(--blue-500)        0%, var(--blue-700)              100%);
    --gradient-purple: linear-gradient(135deg, var(--color-purple)    0%, var(--color-purple-dark)     100%);
    --gradient-yellow: linear-gradient(135deg, var(--status-warn)     0%, var(--status-warn-dark)      100%);
    --gradient-gray:   linear-gradient(135deg, var(--color-colorless) 0%, var(--color-colorless-light) 100%);
    --gradient-white:  linear-gradient(135deg, var(--color-white-dim) 0%, var(--color-white-shade)     100%);

    /* ── Escala neutral de grises ───────────────────────────────────────── */
    --neutral-900: #111827;
    --neutral-800: #1f2937;
    --neutral-700: #374151;
    --neutral-600: #4b5563;
    --neutral-500: #6b7280;
    --neutral-400: #9ca3af;
    --neutral-300: #d1d5db;
    --neutral-200: #e5e7eb;
    --neutral-100: #f3f4f6;
    --neutral-50:  #f9fafb;
    --color-black: #000000;

    /* ── Escala azul (legacy interactivo — migrar a --brand) ────────────── */
    --blue-900: #1e3a8a;
    --blue-800: #1e40af;
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-400: #60a5fa;
    --blue-300: #93c5fd;
    --blue-200: #bfdbfe;
    --blue-100: #dbeafe;
    --blue-50:  #eff6ff;

    /* ── Escala púrpura (legacy badges/scores) ──────────────────────────── */
    --purple-700: #7c3aed;
    --purple-600: #8b5cf6;
    --purple-500: #a855f7;
    --purple-400: #a78bfa;

    /* ── Accent / special (legacy) ──────────────────────────────────────── */
    --amber-400:  #fbbf24;
    --amber-300:  #fcd34d;
    --green-500:  #22c55e;
    --green-400:  #4ade80;
    --green-300:  #86efac;
    --green-200:  #bbf7d0;
    --red-400:    #f87171;
    --red-300:    #fca5a5;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-400: #fb923c;
    --indigo-500: #6366f1;
    --indigo-400: #818cf8;
    --indigo-300: #a5b4fc;
    --teal-600:   #0d9488;
    --teal-500:   #14b8a6;
    --teal-soft:  rgba(20,184,166,0.12);
    --pink-500:   #ec4899;
    --pink-400:   #f472b6;
    --color-gold:   #ffd700;
    --color-silver: #bdc3c7;
    --color-bronze: #cd7f32;

    /* Deck Photo backgrounds (separados de la escala de superficie UI) */
    --photo-bg:    #111318;
    --photo-card:  #1b1b1b;
    --photo-panel: #2a2a3a;

    /* ════════════════════════════════════════════════════════════════════
       3. SUPERFICIES (dark). ⚠ escala invertida: 950 = más oscuro, 50 = texto.
       Los componentes usan los ALIAS semánticos de §4, no estos crudos.
    ════════════════════════════════════════════════════════════════════ */
    --surface-950: #0f172a;   /* fondo más profundo / inputs */
    --surface-900: #1e293b;   /* panels, modals, menús */
    --surface-800: #1f2937;   /* panel alterno */
    --surface-700: #2d3748;   /* cards, superficies elevadas */
    --surface-600: #334155;   /* botón secundario / bg */
    --surface-500: #475569;   /* bordes */
    --surface-400: #5b6b82;   /* borde fuerte (interpolado) */
    --surface-300: #94a3b8;   /* texto muted */
    --surface-200: #cbd5e1;   /* texto secundario */
    --surface-100: #e2e8f0;   /* texto claro sobre fondo oscuro */
    --surface-50:  #f1f5f9;   /* texto casi blanco */
    --gradient-surface-dark: linear-gradient(145deg, var(--surface-900), var(--surface-950));

    /* ── Status semánticos (UI feedback) ────────────────────────────────── */
    --status-ok:           #10b981;
    --status-ok-dark:      #059669;
    --status-ok-bg:        #d1fae5;
    --status-ok-border:    var(--green-200);
    --status-ok-bg-dark:   #065f46;
    --status-warn:         #f59e0b;
    --status-warn-dark:    #d97706;
    --status-warn-text:    #856404;
    --status-warn-bg:      #fff3cd;
    --status-warn-bg-dark: #78350f;
    --status-danger:       #ef4444;
    --status-danger-dark:  #dc2626;
    --status-danger-text:  #991b1b;
    --status-danger-bg:    #fef2f2;
    --status-danger-bg-dark:#7f1d1d;
    --status-info-ui:      #60a5fa;

    /* ── Section brand colors (legacy paneles) ──────────────────────────── */
    --section-add:                #dc3545;
    --section-add-dark:           #c82333;
    --section-add-shadow:         rgba(220, 53, 69, 0.3);
    --section-considering:        #17a2b8;
    --section-considering-dark:   #138496;
    --section-considering-shadow: rgba(23, 162, 184, 0.3);
    --section-deck:               #667eea;   /* = --brand */
    --section-deck-dark:          #764ba2;   /* = --brand-strong */
    --section-deck-shadow:        rgba(102, 126, 234, 0.3);
    --section-play:               #16a34a;
    --section-play-dark:          #15803d;
    --section-play-shadow:        rgba(22, 163, 74, 0.35);
    --gradient-section-add:         linear-gradient(135deg, var(--section-add)         0%, var(--section-add-dark)         100%);
    --gradient-section-considering: linear-gradient(135deg, var(--section-considering) 0%, var(--section-considering-dark) 100%);
    --gradient-section-deck:        linear-gradient(135deg, var(--section-deck)        0%, var(--section-deck-dark)        100%);
    --gradient-section-play:        linear-gradient(135deg, var(--section-play)        0%, var(--section-play-dark)        100%);

    /* ════════════════════════════════════════════════════════════════════
       4. ALIAS SEMÁNTICOS (DS §2.3/§2.6) — lo único que tocan los componentes.
       Hoy = columna DARK. Light (fase 2) = re-map bajo [data-theme="light"].
    ════════════════════════════════════════════════════════════════════ */
    --bg:               var(--surface-950);   /* fondo de página */
    --surface:          var(--surface-900);   /* card / panel */
    --surface-elevated: var(--surface-700);   /* superficie elevada */
    --surface-sunken:   #0a0f1c;              /* input wells */
    --border:           var(--surface-500);
    --border-strong:    var(--surface-400);
    --text:             var(--surface-50);
    --text-muted:       var(--surface-300);
    --text-faint:       var(--neutral-400);

    /* Estados semánticos + sus -soft (badges/alerts). Re-expuestos con nombres del DS. */
    --color-success: var(--green-500);
    --color-danger:  var(--status-danger);
    --color-warning: var(--status-warn);
    --color-info:    var(--blue-500);
    --color-success-soft: rgba(34, 197, 94, 0.12);
    --color-danger-soft:  rgba(239, 68, 68, 0.12);
    --color-warning-soft: rgba(245, 158, 11, 0.12);
    --color-info-soft:    rgba(59, 130, 246, 0.12);

    /* Alias de compatibilidad: --color-primary apuntaba a azul. Ahora → marca.
       Temporal durante la migración; se elimina cuando ninguna página lo use. */
    --color-primary: var(--brand);

    /* ════════════════════════════════════════════════════════════════════
       5. TIPOGRAFÍA (DS §3)
    ════════════════════════════════════════════════════════════════════ */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);  /* H1/H2/Display, weight 700 */

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

    --line-tight:  1.2;
    --line-normal: 1.6;

    /* ════════════════════════════════════════════════════════════════════
       6. ESPACIADO (base 0.25rem) — DS §4
    ════════════════════════════════════════════════════════════════════ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ════════════════════════════════════════════════════════════════════
       7. RADIUS — DS §4
    ════════════════════════════════════════════════════════════════════ */
    --radius-sm:   6px;    /* inputs / tags */
    --radius-md:   10px;   /* botones */
    --radius-lg:   16px;   /* cards / paneles */
    --radius-xl:   24px;   /* modales */
    --radius-full: 9999px; /* pills / avatars */

    /* ════════════════════════════════════════════════════════════════════
       8. SOMBRAS — DS §4
    ════════════════════════════════════════════════════════════════════ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.45);

    /* ════════════════════════════════════════════════════════════════════
       9. TRANSICIONES
    ════════════════════════════════════════════════════════════════════ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* ════════════════════════════════════════════════════════════════════
       10. FOCO (DS §4 — obligatorio en todo interactivo)
    ════════════════════════════════════════════════════════════════════ */
    --focus-ring: 0 0 0 3px var(--brand-ring);

    /* ════════════════════════════════════════════════════════════════════
       11. Z-INDEX
    ════════════════════════════════════════════════════════════════════ */
    --z-base:            1;
    --z-dropdown:        1000;
    --z-sticky:          1020;
    --z-nav:             1030;
    --z-modal-backdrop:  1040;
    --z-modal:           1050;
    --z-toast:           1060;

    /* ════════════════════════════════════════════════════════════════════
       12. BREAKPOINTS (DS §7) — referencia. NO se pueden usar en @media()
       (CSS no permite var() en media queries); escribir el px literal en el
       @media y usar SOLO estos 4 valores, mobile-first (min-width).
    ════════════════════════════════════════════════════════════════════ */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --page-max-width: 1600px;  /* canonical content width — matches nav-container */

    /* ════════════════════════════════════════════════════════════════════
       13. DATA-VIZ (DS §2.4b — charts del roadmap)
    ════════════════════════════════════════════════════════════════════ */
    --chart-series-1: #667eea;
    --chart-series-2: #22c55e;
    --chart-series-3: #f59e0b;
    --chart-series-4: #ec4899;
    --chart-series-5: #06b6d4;
    --chart-series-6: #a855f7;
    --chart-series-7: #f97316;
    --chart-series-8: #94a3b8;
    --chart-up:   var(--green-500);
    --chart-down: var(--status-danger);
    --chart-flat: var(--text-faint);
    --chart-grid: var(--border);
    --chart-axis: var(--text-faint);
    --chart-area: var(--brand-soft);

    /* Matchup tier / verdict (Battle Lab win-rate ring, sweep rows).
       Hex directos (no var() encadenado): el JS los lee con getComputedStyle,
       que NO resuelve referencias var() anidadas. */
    --tier-dominant:    #22c55e;
    --tier-favorable:   #818cf8;
    --tier-contested:   #f59e0b;
    --tier-unfavorable: #f87171;
    --tier-bad:         #ef4444;

    /* Tactical resource palette (Battle Lab — gráfico de 12 series).
       Hex directos por la misma razón (lectura vía getComputedStyle). */
    --tactical-hi-man:       #fbbf24;
    --tactical-blocker:      #60a5fa;
    --tactical-breach:       #f87171;
    --tactical-extra-attack: #34d399;
    --tactical-card-draw:    #a78bfa;
    --tactical-energy:       #fb923c;
    --tactical-repair:       #67e8f9;
    --tactical-tokens:       #e879f9;
    --tactical-direct-dmg:   #ff5555;
    --tactical-rest:         #94a3b8;
    --tactical-bounce:       #4ade80;
    --tactical-destroy:      #ef4444;

    /* ════════════════════════════════════════════════════════════════════
       14. GAME CARD (consolida unified-cards + unified-card-styles + deck-photo)
       Dimensiones y estilo de la carta de juego. La carta como tal se define
       como componente .game-card en components.css; acá viven sus tokens.
    ════════════════════════════════════════════════════════════════════ */
    --card-width:      160px;
    --card-height:     calc(var(--card-width) * 1.447);
    --card-min-width:  min(var(--card-width), 30vw);
    --card-min-height: calc(var(--card-min-width) * 1.447);
    --card-aspect:     0.691;  /* ancho/alto ≈ 1/1.447 */
    --card-radius:     12px;

    --card-bg:            var(--color-white);
    --card-border:        var(--surface-100);
    --card-shadow:        0 2px 8px rgba(0, 0, 0, 0.1);
    --card-shadow-hover:  0 8px 32px rgba(0, 0, 0, 0.15);
    --card-border-radius: 12px;
    --card-transition:    transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    --card-hover-transform: translateY(-4px);
    --card-title-size:   1.1rem;
    --card-title-weight: 600;
    --card-meta-size:    0.875rem;
    --card-meta-color:   var(--neutral-500);
    --card-padding:      0rem;
    --card-gap:          24px;

    /* Alias unified-* (legacy — los consume unified-card-styles.css) */
    --unified-card-width:      160px;
    --unified-card-height:     calc(var(--unified-card-width) * 1.447);
    --unified-card-min-width:  min(var(--unified-card-width), 30vw);
    --unified-card-min-height: calc(var(--unified-card-min-width) * 1.447);
    --unified-card-bg:            var(--color-white);
    --unified-card-border:        var(--surface-100);
    --unified-card-shadow:        0 2px 8px rgba(0, 0, 0, 0.1);
    --unified-card-shadow-hover:  0 12px 35px rgba(0, 0, 0, 0.3);
    --unified-card-border-radius: 12px;
    --unified-card-transition:    transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    --unified-card-hover-transform: translateY(-2px);
    --unified-card-red:       linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
    --unified-card-blue:      linear-gradient(135deg, var(--color-blue) 0%, var(--teal-600) 100%);
    --unified-card-green:     linear-gradient(135deg, var(--color-green) 0%, var(--color-green-light) 100%);
    --unified-card-white:     linear-gradient(135deg, var(--color-white-dim) 0%, var(--color-white-shade) 100%);
    --unified-card-colorless: linear-gradient(135deg, var(--color-colorless) 0%, var(--color-colorless-light) 100%);
    --unified-card-yellow:    linear-gradient(135deg, var(--color-yellow) 0%, var(--status-warn-dark) 100%);
    --unified-card-purple:    linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    --unified-card-default:   var(--gradient-section-deck);
}