/* ==========================================================================
   TOKENS GLOBALES — Números en Vivo
   Colores, tipografías, radios, sombras y espaciados. Cambiar identidad visual empieza acá.
   ========================================================================== */

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


:root {
  /* Marca principal actual */
  --brand-primary: #20201D;
  --brand-primary-2: #2B2B2B;
  --brand-primary-3: #3F4141;

  --brand-bg: #F4E8D8;
  --brand-surface: #FFF8EC;
  --brand-surface-2: #FFFFFF;

  --brand-accent: #EF5148;
  --brand-accent-2: #FF6A58;
  --brand-danger: #D32F2F;
  --brand-success: #16A34A;
  --brand-warning: #F59E0B;
  --brand-info: var(--brand-primary-3);

  --brand-text: var(--brand-primary);
  --brand-text-2: var(--brand-primary-2);
  --brand-text-3: var(--brand-primary-3);
  --brand-muted: #756C61;
  --brand-muted-2: #9CA3AF;

  --brand-border: rgba(32, 32, 29, .12);
  --brand-border-strong: rgba(32, 32, 29, .18);

  --brand-shadow-sm: 0 2px 8px rgba(32, 32, 29, .08);
  --brand-shadow-md: 0 10px 28px rgba(32, 32, 29, .12);
  --brand-shadow-lg: 0 20px 48px rgba(32, 32, 29, .16);

  /* Tipografías */
  --font-display: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-number: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Escala visual */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-xs: .35rem;
  --space-sm: .65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;

  /* Alias actuales: mantienen compatibilidad con styles.css legado */
  --theme-font-display: var(--font-display);
  --theme-font-body: var(--font-body);
  --theme-font-number: var(--font-number);

  --theme-ink: var(--brand-primary);
  --theme-ink-2: var(--brand-primary-2);
  --theme-ink-3: var(--brand-primary-3);
  --theme-navy: var(--brand-primary);
  --theme-navy-2: var(--brand-primary-2);
  --theme-blue: var(--brand-primary-3);
  --theme-accent: var(--brand-accent);
  --theme-accent-2: var(--brand-accent-2);
  --theme-bg-soft: var(--brand-bg);
  --theme-surface: var(--brand-surface);
  --theme-white: var(--brand-surface-2);
  --theme-muted: var(--brand-muted);
  --theme-muted-2: var(--brand-muted-2);
  --theme-gold: var(--brand-warning);
  --theme-green: var(--brand-success);
  --theme-line: var(--brand-border);
  --theme-line-strong: var(--brand-border-strong);
  --theme-shadow-sm: var(--brand-shadow-sm);
  --theme-shadow-md: var(--brand-shadow-md);
  --theme-shadow-lg: var(--brand-shadow-lg);

  --color-carbon: var(--brand-primary);
  --color-marino: var(--brand-primary);
  --color-rojo: var(--brand-accent);
  --color-rojo-hover: var(--brand-accent-2);
  --color-crema: var(--brand-bg);
  --color-blanco: var(--brand-surface-2);
  --color-gris: var(--brand-muted);
  --color-gris-claro: #F2F4F7;
  --color-borde: var(--brand-border);

  --nev-charcoal: var(--brand-primary);
  --nev-ink: var(--brand-primary);
  --nev-coral: var(--brand-accent);
  --nev-cream: var(--brand-bg);
  --nev-surface: var(--brand-surface);
}

/* ==========================================================================
   TOKENS LEGADOS EXTRAÍDOS DE styles.css — Fase 37
   Mantiene compatibilidad visual mientras se reduce el CSS maestro.
   ========================================================================== */

:root {
  /* Tipografías */
  --theme-font-display: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-font-number: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Paleta principal: cambiar estos valores modifica la identidad visual global */
  --theme-ink: #20201D;
  --theme-ink-2: #2B2B2B;
  --theme-ink-3: #3F4141;
  --theme-navy: var(--color-marino);
  --theme-navy-2: var(--brand-primary-2);
  --theme-blue: var(--brand-primary-3);
  --theme-accent: #EF5148;
  --theme-accent-2: #FF6A58;
  --theme-bg-soft: #F4E8D8;
  --theme-surface: #FFF8EC;
  --theme-white: #FFFFFF;
  --theme-muted: #756C61;
  --theme-muted-2: #9CA3AF;
  --theme-gold: #F59E0B;
  --theme-green: #16A34A;

  /* Bordes, radios, sombras y ritmo */
  --theme-line: rgba(32, 32, 29, .12);
  --theme-line-strong: rgba(32, 32, 29, .18);
  --theme-shadow-sm: 0 2px 8px rgba(32, 32, 29, .08);
  --theme-shadow-md: 0 10px 28px rgba(32, 32, 29, .12);
  --theme-shadow-lg: 0 20px 48px rgba(32, 32, 29, .16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --transition-base: all .2s cubic-bezier(.4, 0, .2, 1);

  /* Alias heredados: permiten que páginas viejas usen la misma paleta sin duplicar temas */
  --font-display: var(--theme-font-display);
  --font-body: var(--theme-font-body);
  --font-number: var(--theme-font-number);
  --nev-azul-950: #071626;
  --nev-azul-900: #0b1f36;
  --nev-azul-800: #12345a;
  --nev-azul-700: #155da8;
  --nev-azul-600: #1877d3;
  --nev-celeste-500: #39bdf8;
  --nev-celeste-100: #e7f7ff;
  --nev-fondo: #f7fbff;
  --nev-superficie: var(--theme-white);
  --nev-texto: #142033;
  --nev-muted: var(--theme-muted);
  --nev-borde: rgba(17, 47, 82, .12);
  --nev-sombra-suave: 0 14px 34px rgba(7, 22, 38, .08);
  --color-marino: var(--theme-ink);
  --color-azul: var(--theme-blue);
  --color-rojo: var(--theme-accent);
  --color-blanco: var(--theme-white);
  --color-gris-claro: var(--theme-bg-soft);
  --color-gris: var(--theme-muted);
  --color-gris-oscuro: var(--theme-ink-2);
  --sombra-sm: var(--theme-shadow-sm);
  --sombra-md: var(--theme-shadow-md);
  --sombra-lg: var(--theme-shadow-lg);
  --radio-sm: var(--radius-sm);
  --radio-md: var(--radius-md);
  --radio-lg: var(--radius-lg);
  --esp-xs: var(--space-xs);
  --esp-sm: var(--space-sm);
  --esp-md: var(--space-md);
  --esp-lg: var(--space-lg);
  --esp-xl: var(--space-xl);
  --transicion: var(--transition-base);
  --color-crema: #fff4e5;
  --color-crema-2: #ead9c4;
  --color-carbon: var(--theme-ink);
  --color-carbon-2: #2b2c29;
  --color-coral: var(--theme-accent);
  --color-coral-2: var(--theme-accent-2);
  --color-linea: #24242324;
  --nev-cream: var(--theme-bg-soft);
  --nev-cream-2: var(--theme-surface);
  --nev-charcoal: var(--theme-ink);
  --nev-card: var(--theme-surface);
  --nev-coral: var(--theme-accent);
  --nev-coral-2: var(--theme-accent-2);
  --nev-cyan: #19bdd4;
  --nev-yellow: #f6f000;
  --nev-paper: var(--theme-surface);
  --nev-paper-2: #f7ead8;
  --nev-charcoal-2: #2d3030;
  --nev-ink: var(--theme-ink);
  --nev-line: var(--theme-line);
  --nev-v91-pad: 7.5px;
  --nev-coral-soft: #ef514824;
  --nev-ui-bg: var(--theme-ink);
  --nev-ui-bg-2: #303232;
  --nev-ui-cream: var(--theme-surface);
  --nev-ui-coral: #e85e56;
  --nev-ui-coral-dark: #d84b43;
  --nev-ui-ink: var(--theme-ink);
  --nev-ui-muted: #fff8ecb8;
  --nev-ui-line: #fff8ec21;
  --nev-ui-card-line: #20211f1f;
  --nev-graphite: #4b4d4b;
  --dt-navy: var(--theme-navy);
  --dt-navy-2: var(--theme-navy-2);
  --dt-red: var(--theme-accent);
  --dt-red-2: var(--theme-accent);
  --dt-gold: var(--theme-gold);
  --dt-green: var(--theme-green);
  --dt-bg: var(--theme-bg-soft);
  --dt-card: var(--theme-white);
  --dt-text: var(--theme-navy);
  --dt-muted: var(--theme-muted);
  --dt-line: var(--theme-line);
  --dt-shadow: var(--theme-shadow-lg);
  --mw-navy: var(--theme-navy);
  --mw-navy-2: var(--theme-navy-2);
  --mw-red: var(--theme-accent);
  --mw-red-2: var(--theme-accent);
  --mw-gold: var(--theme-gold);
  --mw-gold-2: #d98e10;
  --mw-cream: var(--theme-surface);
  --mw-bg: var(--theme-bg-soft);
  --mw-white: var(--theme-white);
  --mw-text: var(--theme-navy);
  --mw-muted: var(--theme-muted);
  --mw-line: var(--theme-line);
  --mw-green: var(--theme-green);
  --shadow-sm: 0 2px 8px rgba(11,29,58,0.06);
  --shadow-md: 0 6px 20px rgba(11,29,58,0.10);
  --shadow-lg: 0 16px 40px rgba(11,29,58,0.12);
  --beige: #EDE5DD;
  --beige-dark: #E0D4C8;
  --coral: var(--theme-accent);
  --coral-dark: var(--theme-accent);
  --carbon: var(--theme-ink-2);
  --carbon-soft: #4A4A4A;
  --ink-muted: #7A6F66;
  --cp-coral: var(--theme-accent);
  --cp-charcoal: var(--theme-ink);
  --cp-cream: var(--theme-bg-soft);
  --cp-paper: var(--theme-surface);
  --cp-card: var(--theme-surface);
  --cp-muted: var(--theme-muted);
  --cp-line: var(--theme-line);
  --cp-shadow: var(--theme-shadow-md);
  --coral2: var(--theme-accent);
  --gold: var(--theme-gold);
  --gold2: #E8B84A;
  --ink: var(--theme-ink);
  --paper: var(--theme-bg-soft);
  --cream: var(--theme-surface);
  --muted: var(--theme-muted);
  --cream2: #EDE0CE;
  --cream3: #E2D0B8;
  --coral3: #F07060;
  --dark: var(--theme-ink);
  --dark2: #2C2620;
  --dark3: #3E3228;
  --mid: #8C7060;
  --white: var(--theme-white);
  --nev-coral-dark: #d84a46;
  --nev-shadow: var(--theme-shadow-lg);
}

/* ============================================================
   00B. SISTEMA DE TEMAS PREPARADO
   Cambiando data-theme en <html> o <body> se modifica la paleta
   sin reescribir componentes.
   ============================================================ */
:root,
[data-theme="clasico"] {
  color-scheme: light;
}

[data-theme="oscuro"] {
  color-scheme: dark;
  --theme-ink: #F8EFE3;
  --theme-ink-2: #FFF8EC;
  --theme-ink-3: #D8CBB8;
  --theme-bg-soft: #141514;
  --theme-surface: #20211F;
  --theme-white: #262826;
  --theme-muted: #D6C9B8;
  --theme-line: rgba(255, 248, 236, .16);
  --theme-line-strong: rgba(255, 248, 236, .28);
  --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, .24);
  --theme-shadow-md: 0 12px 30px rgba(0, 0, 0, .32);
  --theme-shadow-lg: 0 24px 54px rgba(0, 0, 0, .42);
  --color-marino: var(--theme-ink);
  --color-gris-claro: var(--theme-bg-soft);
  --color-blanco: var(--theme-white);
  --nev-card: var(--theme-surface);
  --nev-paper: var(--theme-surface);
  --dt-bg: var(--theme-bg-soft);
  --dt-card: var(--theme-surface);
  --mw-bg: var(--theme-bg-soft);
  --mw-white: var(--theme-surface);
}

[data-theme="alto-contraste"] {
  color-scheme: light;
  --theme-ink: #111111;
  --theme-ink-2: #1B1B1B;
  --theme-bg-soft: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-accent: #D92323;
  --theme-accent-2: #B51414;
  --theme-blue: #004C99;
  --theme-muted: #404040;
  --theme-line: rgba(0, 0, 0, .28);
  --theme-line-strong: rgba(0, 0, 0, .42);
  --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, .12);
  --theme-shadow-md: 0 8px 22px rgba(0, 0, 0, .16);
  --theme-shadow-lg: 0 16px 40px rgba(0, 0, 0, .20);
}

/* ============================================================
   00C. MAPA DE COMPONENTES COMPARTIDOS
   Estos nombres son la guía para futuros cambios visuales.
   - Header: .header, .nev-header, .nav, .nav-dropdown, .nev-search
   - Footer: .footer-main, .footer-inner, .footer-col, .footer-bottom
   - Botones: .btn, .btn-primary, .nev-primary-link, .nav-link
   - Cards: .card, .resultado-card, .juego-card, .tool-card
   - Formularios: input, select, textarea, .search, .nev-search-form
   - Tablas/listas: .tabla, .ranking, .lista, .grid
   ============================================================ */


/*
  Tema de ejemplo para una futura prueba.
  No está activo. Para probarlo: <html data-theme="amarillo-verde-violeta">
*/
[data-theme="amarillo-verde-violeta"] {
  --brand-primary: #3B0764;
  --brand-primary-2: #581C87;
  --brand-primary-3: #6D28D9;
  --brand-bg: #FEF9C3;
  --brand-surface: #FFFBEB;
  --brand-surface-2: #FFFFFF;
  --brand-accent: #84CC16;
  --brand-accent-2: #A3E635;
  --brand-success: #22C55E;
  --brand-warning: #FACC15;
  --brand-info: #7C3AED;
  --brand-danger: #DC2626;
  --brand-muted: #5B4B66;
  --brand-muted-2: #8B7A95;
  --brand-border: rgba(59, 7, 100, .14);
  --brand-border-strong: rgba(59, 7, 100, .22);
  --brand-shadow-sm: 0 2px 8px rgba(59, 7, 100, .08);
  --brand-shadow-md: 0 10px 28px rgba(59, 7, 100, .13);
  --brand-shadow-lg: 0 20px 48px rgba(59, 7, 100, .18);
}


/*
  Nota de marca:
  La identidad principal NO usa azul. Los nombres heredados
  --color-marino, --theme-navy y --theme-blue se conservan solo
  por compatibilidad, pero apuntan al gris oscuro/carbón.
*/