/* ============================================================
   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.
   Las paletas adicionales (abajo) se suman aquí según sean claras u oscuras. */
html.theme-cg.theme-dark,
html.theme-cg.theme-ultra,
html.theme-cg.theme-grafito,
html.theme-cg.theme-ocaso,
html.theme-cg.theme-zinc,
html.theme-cg.theme-slate,
html.theme-cg.theme-bosque { color-scheme: dark; }
html.theme-cg.theme-light,
html.theme-cg.theme-bruma,
html.theme-cg.theme-nord,
html.theme-cg.theme-sepia,
html.theme-cg.theme-salvia,
html.theme-cg.theme-cielo,
html.theme-cg.theme-gris,
html.theme-cg.theme-stone { 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));
    /* Barra de menú (top-bar / sidebar / drawer). Por defecto OSCURA con
       primer plano claro; los temas CLAROS la reasignan abajo a superficies
       claras + primer plano oscuro (var --nav-fg / --nav-fg-muted). */
    --nav-bg: #161c30;
    --nav-bg-2: #1b2240;
    --nav-fg: #e8edf7;        /* texto/iconos del menú (claro sobre barra oscura) */
    --nav-fg-muted: #cdd6ec;  /* iconos/subtítulos del menú */
}

/* TEMAS CLAROS: barra de menú CLARA con primer plano OSCURO. Vale para todas
   las paletas claras (todas llevan .theme-light); --nav-* resuelven a las
   superficies/textos de cada paleta al usarse. */
html.theme-cg.theme-light {
    --nav-bg: var(--surface-2);
    --nav-bg-2: var(--surface-3);
    --nav-fg: var(--text);
    --nav-fg-muted: var(--muted);
}

/* 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;
}

/* ============================================================
   PALETAS ADICIONALES (design tokens conmutables)
   ------------------------------------------------------------
   Mismo mecanismo que ULTRA: cada paleta define valores EXPLÍCITOS
   (no light-dark) con especificidad .theme-cg.theme-<id> (2 clases),
   por lo que ganan al bloque base html.theme-cg. El color-scheme de
   cada una se fija arriba. En core.js cada paleta lleva además su
   clase base (theme-light | theme-dark) para reutilizar todo el
   chrome de ese modo (menú, tablas, sprites…).

   Claras : bruma · nord · sepia · salvia · cielo
   Oscuras: grafito · ocaso
   ============================================================ */

/* --- Bruma Índigo: gris frío neutro + índigo suave (claro) --- */
html.theme-cg.theme-bruma {
    --bg: #eef1f6; --surface: #fbfcfe; --surface-2: #f1f4fa; --surface-3: #e5eaf3;
    --border: rgba(15, 23, 42, .10); --text: #273043; --muted: #64708a;
    --accent: #5b61e6; --accent-2: #7c82f2; --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
/* --- Nord Ártico: azules "frost" apagados sobre nieve (claro) --- */
html.theme-cg.theme-nord {
    --bg: #e8edf3; --surface: #f6f8fb; --surface-2: #eceff4; --surface-3: #dfe4ec;
    --border: rgba(46, 52, 64, .12); --text: #2e3440; --muted: #4c566a;
    --accent: #5e81ac; --accent-2: #81a1c1; --shadow: 0 8px 24px rgba(46, 52, 64, .10);
}
/* --- Sepia Cálido: crema/sepia estilo lectura, baja fatiga (claro) --- */
html.theme-cg.theme-sepia {
    --bg: #f2ebdf; --surface: #fbf6ee; --surface-2: #f1e8d8; --surface-3: #e7dcc8;
    --border: rgba(74, 63, 53, .14); --text: #463c30; --muted: #8a7a64;
    --accent: #b3703c; --accent-2: #cc8b53; --shadow: 0 8px 24px rgba(74, 63, 53, .10);
}
/* --- Salvia: verde salvia apagado, guiño a la marca (claro) --- */
html.theme-cg.theme-salvia {
    --bg: #e7efe9; --surface: #f8fbf9; --surface-2: #e9f1ec; --surface-3: #dbe8df;
    --border: rgba(43, 58, 51, .12); --text: #2b3a33; --muted: #5f7268;
    --accent: #3f8f74; --accent-2: #57ab8e; --shadow: 0 8px 24px rgba(43, 58, 51, .10);
}
/* --- Cielo: acento azul #0FA0EA sobre BLANCO puro (claro) ---
   Fondo y superficie blancos; la zonación (cabeceras/toolbar/filtros)
   la da --surface-2 en azul muy tenue + bordes/sombra azulados. Texto
   azul marino profundo (misma familia que el acento => coherente). */
html.theme-cg.theme-cielo {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #eef6fd; --surface-3: #e0eefa;
    --border: rgba(13, 49, 74, .12); --text: #13314a; --muted: #5b7186;
    --accent: #0fa0ea; --accent-2: #4fbef2; --shadow: 0 8px 24px rgba(15, 90, 140, .10);
}
/* --- Grafito: oscuro cálido que NO es negro; texto gris claro (oscuro) --- */
html.theme-cg.theme-grafito {
    --bg: #1b1e24; --surface: #232830; --surface-2: #2b313b; --surface-3: #333a46;
    --border: rgba(255, 255, 255, .08); --text: #dfe4ec; --muted: #97a0b0;
    --accent: #7c8cff; --accent-2: #9aa6ff; --shadow: 0 12px 30px rgba(0, 0, 0, .45);
    --nav-bg: #15181d; --nav-bg-2: #1e222a;
}
/* --- Ocaso Azul: azul noche desaturado, acentos azul cielo (oscuro) --- */
html.theme-cg.theme-ocaso {
    --bg: #141a2b; --surface: #1c2338; --surface-2: #242c46; --surface-3: #2e3756;
    --border: rgba(255, 255, 255, .09); --text: #dbe2f2; --muted: #8b96b5;
    --accent: #6ea8fe; --accent-2: #8fbcff; --shadow: 0 12px 30px rgba(0, 0, 0, .5);
    --nav-bg: #111627; --nav-bg-2: #1a2138;
}

/* ---- Paletas "tendencia 2026" (fuentes: recursion.software, updivision, uicolors) ---- */
/* --- Zinc Neutro: oscuro neutro puro; texto #fafafa (no blanco) anti-glare (oscuro) --- */
html.theme-cg.theme-zinc {
    --bg: #09090b; --surface: #18181b; --surface-2: #212124; --surface-3: #2a2a2e;
    --border: rgba(255, 255, 255, .09); --text: #fafafa; --muted: #a1a1aa;
    --accent: #818cf8; --accent-2: #a5b4fc; --shadow: 0 12px 34px rgba(0, 0, 0, .6);
    --nav-bg: #0d0d0f; --nav-bg-2: #161618;
}
/* --- Slate Frío: slate clásico de dashboards, acento sky (oscuro) --- */
html.theme-cg.theme-slate {
    --bg: #0f172a; --surface: #1e293b; --surface-2: #263449; --surface-3: #334155;
    --border: rgba(255, 255, 255, .08); --text: #e2e8f0; --muted: #94a3b8;
    --accent: #38bdf8; --accent-2: #7dd3fc; --shadow: 0 12px 34px rgba(0, 0, 0, .5);
    --nav-bg: #0b1120; --nav-bg-2: #16233a;
}
/* --- Bosque: verde bosque profundo, acento esmeralda (oscuro) --- */
html.theme-cg.theme-bosque {
    --bg: #0c1512; --surface: #14211c; --surface-2: #1b2b24; --surface-3: #24382f;
    --border: rgba(255, 255, 255, .08); --text: #e6efe9; --muted: #8ba79a;
    --accent: #34d399; --accent-2: #6ee7b7; --shadow: 0 12px 34px rgba(0, 0, 0, .5);
    --nav-bg: #0a120f; --nav-bg-2: #12201a;
}
/* --- Gris Neutro: claro estándar base #f8f9fa, acento azul (claro) --- */
html.theme-cg.theme-gris {
    --bg: #f8f9fa; --surface: #ffffff; --surface-2: #f1f3f5; --surface-3: #e9ecef;
    --border: rgba(15, 23, 42, .10); --text: #1f2937; --muted: #6b7280;
    --accent: #2563eb; --accent-2: #3b82f6; --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
/* --- Stone Cálido: neutros cálidos con acento naranja (claro) --- */
html.theme-cg.theme-stone {
    --bg: #faf9f7; --surface: #ffffff; --surface-2: #f5f4f1; --surface-3: #ece9e4;
    --border: rgba(41, 37, 36, .12); --text: #292524; --muted: #78716c;
    --accent: #ea580c; --accent-2: #fb923c; --shadow: 0 8px 24px rgba(41, 37, 36, .08);
}