/* ============================================================
   tokens.css — VARIABLES GLOBALES (design tokens) por tema
   ------------------------------------------------------------
   Los colores claro/oscuro se definen UNA sola vez con light-dark():
   el valor se resuelve según la propiedad `color-scheme`, que fijamos
   por CLASE de tema (no por el media query del SO), así que el
   resultado es determinista:
     - Oscuro:       color-scheme: dark   (.theme-dark)
     - Ultra oscuro: color-scheme: dark   (.theme-ultra) + override de tokens
     - Claro:        color-scheme: light  (.theme-light)
   Ventaja extra: color-scheme también tiñe los controles NATIVOS
   (scrollbars, <select>, date pickers, etc.) acorde al tema.
   Requiere navegador 2024+ (Chrome 123 / Firefox 120 / Safari 17.5);
   el backoffice con temas nuevos asume navegador moderno.
   El tema CLÁSICO no tiene clases => no hereda nada de aquí.
   ============================================================ */

/* color-scheme: decide el lado de light-dark() y tiñe los controles nativos. */
html.theme-cg.theme-dark,
html.theme-cg.theme-ultra { color-scheme: dark; }
html.theme-cg.theme-light { color-scheme: light; }

/* Tokens compartidos. Formato: light-dark(VALOR_CLARO, VALOR_OSCURO). */
html.theme-cg {
    --radius: 14px;
    --radius-sm: 9px;
    --speed: .2s;
    --bg:        light-dark(#eef1f7, #0f1424);
    --surface:   light-dark(#ffffff, #161c30);
    --surface-2: light-dark(#f3f5fb, #1b2240);
    --surface-3: light-dark(#e6eaf3, #222a4a);
    --border:    light-dark(rgba(15, 23, 42, .10), rgba(255, 255, 255, .08));
    --text:      light-dark(#1e2438, #e8edf7);
    --muted:     light-dark(#5b6478, #94a3c4);
    --accent:    light-dark(#4f46e5, #6366f1);
    --accent-2:  light-dark(#4f46e5, #818cf8);
    --shadow:    light-dark(0 8px 24px rgba(15, 23, 42, .10), 0 10px 30px rgba(2, 6, 23, .35));
    /* El sidebar/drawer siempre va oscuro en ambos temas (iconos claros). */
    --nav-bg: #161c30;
    --nav-bg-2: #1b2240;
}

/* ULTRA-DARK: negro puro con matices fríos + acento violeta. Override sobre el
   lado oscuro de light-dark() (mayor especificidad: .theme-cg.theme-ultra). */
html.theme-cg.theme-ultra {
    --bg: #000000;
    --surface: #0a0b0e;
    --surface-2: #111319;
    --surface-3: #1a1d25;
    --border: rgba(255, 255, 255, .09);
    --text: #e9edf5;
    --muted: #8b93a3;
    --accent: #7c3aed;
    --accent-2: #a78bfa;
    --shadow: 0 12px 34px rgba(0, 0, 0, .7);
    --nav-bg: #07080b;
    --nav-bg-2: #0e1014;
}