/* ═══════════════════════════════════════════════════════════════════════════
   CBI THEMES — fuente ÚNICA de los cuatro temas: Default · Midnight · Emerald · White   (P26, 2026-10)

   · Cada tema vive UNA sola vez, aquí, bajo html[data-theme="…"]. Terminal, Desk y Hub lo consumen:
     fijan document.documentElement.dataset.theme antes del primer pintado leyendo `cbm_theme`
     (lo escribe el Hub en Settings → Colour Theme). Ver los bloques «theme-boot» de
     apps/terminal, apps/desk y apps/hub, y setTheme() en js/02-core.js.
   · Qué define: la escala neutra (fondos --bg0…--bg4, bordes, texto --text0…--text2), el «blanco» frío
     del tema claro, las variantes de acento del tema claro, los tokens derivados de tinte tenue y (P33) los
     acentos de marca de Terminal, Desk y Hub: bloque html[data-brand="cbi"] (--green #38c9a0, --amber #c9a227,
     --red #ff3d5a, --blue #4ea8f5, --purple #9f7aea y --blue2 / --purple2). Midnight y White sustituyen los suyos
     más abajo. --gold #d4af37 sigue en css/terminal.css :root.
   · Los neutros salen de scripts/gen-neutral-scale.cjs (OKLCH → hex, pasos ΔE_OK uniformes):
     no se editan a mano. Contrato (tests/neutral-scale.test.cjs): texto ≥ 7:1 / 4,5:1 / 3:1 sobre
     --bg1 (text2 además ≥ 4,5:1 sobre --bg0, --bg1, --bg2 y --bg3), el blanco no es #ffffff.
   · Espejo: css/terminal.css :root y el :root inline de apps/hub repiten el tema «default» (y terminal.css también
     los acentos de marca) como red de seguridad (página sin atributo data-theme). css/tokens.css (nombres con
     guion: --bg-0…) refleja Default y White. scripts/verify-tokens-mirror.cjs falla si algo diverge.
   · Doble selector (html y html body): hasta P33, js/00b-tenant.js escribía la paleta por defecto en línea sobre :root
     en TODAS las páginas y un estilo en línea gana a cualquier hoja sobre ese elemento; una declaración sobre <body>
     gana a lo heredado de <html>. Ya no se escribe nada por defecto en línea (tests/inline-color.test.cjs lo impide),
     pero el doble selector se mantiene: una gestora con marca blanca real sigue pintando en línea sobre <html> y
     <body> la supera, como antes. Es la misma capa en la que declaraban las antiguas clases body.theme-*.
     js/84-microcharts.js lee los tokens de <body>.
   · Orden de capas del tema claro: --bg1 es la superficie del panel (el blanco), --bg0 la página
     (un paso más oscuro), --bg2…--bg4 insertos / cabeceras / hover y los bordes siguen oscureciendo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Acentos de marca (P33) ────────────────────────────────────────────────── */
/* NUEVO: brand-accents — paleta de marca de Terminal, Desk y Hub, común a los cuatro temas y declarada UNA vez.
   Son los hex que hasta P33 escribía js/00b-tenant.js (DEFAULT_BRAND) en línea sobre <html>: cambian de sitio, no de valor.
   · Solo con html[data-brand="cbi"] (lo fijan los tres <html>): las páginas legales, status y auth también cargan esta
     hoja y reciben data-theme de js/14-preferences.js, pero declaran sus propios acentos y no deben cambiar.
   · Solo sobre <html>, no sobre <body>: una gestora con marca blanca real pinta en línea sobre <html>
     (js/00b-tenant.js · applyTenantColors) y gana a este bloque; Midnight y White sustituyen los suyos sobre <body>,
     más abajo, igual que antes de P33.
   · Va ANTES de los temas: tiene la misma especificidad que el bloque de Midnight, así que decide el orden. */
html[data-brand="cbi"] {
    --purple:  #9f7aea;
    --purple2: #9f7aea;
    --blue:    #4ea8f5;
    --blue2:   #4ea8f5;
    --green:   #38c9a0;
    --amber:   #c9a227;
    --red:     #ff3d5a;
}
/* /NUEVO: brand-accents */

/* ── Default ───────────────────────────────────────────────────────────────── */
html[data-theme="default"],
html[data-theme="default"] body {
    --bg0:    #06080d;
    --bg1:    #0f1219;
    --bg2:    #181d26;
    --bg3:    #232834;
    --bg4:    #2e3442;
    --border: #394151;
    --border2: #454e60;
    --text0:  #e5e8ec;
    --text1:  #a9aeb8;
    --text2:  #8791a0;
    --fg0: var(--text0);
    --fg1: var(--text1);
    --fg2: var(--text2);
    --dim-a: 10%;
    --edge-a: 30%;
    --shadow-panel: none;
    color-scheme: dark;
}

/* ── Midnight (negro de pantalla OLED, neutro) ─────────────────────────────── */
html[data-theme="midnight"],
html[data-theme="midnight"] body {
    --bg0:    #050506;
    --bg1:    #0d0d10;
    --bg2:    #17171b;
    --bg3:    #212127;
    --bg4:    #2c2c33;
    --border: #373740;
    --border2: #42424e;
    --text0:  #e6e7e9;
    --text1:  #acacb4;
    --text2:  #888996;
    --fg0: var(--text0);
    --fg1: var(--text1);
    --fg2: var(--text2);
    --dim-a: 9%;
    --edge-a: 28%;
    --shadow-panel: none;
    /* Variante propia de Midnight: los llevaba body.theme-midnight y, al ir sobre <body>, ganan al bloque de marca de
       arriba (P33), que rige en Default y Emerald. Son los mismos hex de siempre; no son valores nuevos. */
    --green: #00ff88;
    --red: #ff3d5a;
    --amber: #ffaa00;
    --blue: #4da6ff;
    --purple: #b88aff;
    --gold: #d4af37;
    --glow-g: 0 0 18px color-mix(in srgb, var(--green) 20%, transparent);
    --glow-a: 0 0 18px color-mix(in srgb, var(--amber) 20%, transparent);
    --glow-r: 0 0 18px color-mix(in srgb, var(--red) 20%, transparent);
    color-scheme: dark;
}

/* ── Emerald (verde profundo) ──────────────────────────────────────────────── */
html[data-theme="emerald"],
html[data-theme="emerald"] body {
    --bg0:    #020e0b;
    --bg1:    #081915;
    --bg2:    #112520;
    --bg3:    #1a312c;
    --bg4:    #243e38;
    --border: #2f4c45;
    --border2: #395951;
    --text0:  #e9eeeb;
    --text1:  #a7b4ae;
    --text2:  #879992;
    --fg0: var(--text0);
    --fg1: var(--text1);
    --fg2: var(--text2);
    --dim-a: 12%;
    --edge-a: 32%;
    --shadow-panel: none;
    color-scheme: dark;
}

/* ── White (tema claro de verdad: blanco frío, no #ffffff) ─────────────────── */
/* NUEVO: theme-white */
html[data-theme="white"],
html[data-theme="white"] body {
    --bg0:    #eceff3;   /* página */
    --bg1:    #f8fafd;   /* panel: el «blanco» (L 0,984, croma 0,005, tono 258) */
    --bg2:    #e0e4ea;
    --bg3:    #d3d9e1;
    --bg4:    #c7ced8;
    --border: #bbc3ce;
    --border2: #b0b8c5;
    --text0:  #1a212a;
    --text1:  #3c4553;
    --text2:  #535e6f;
    --fg0: var(--text0);
    --fg1: var(--text1);
    --fg2: var(--text2);
    /* Acentos para fondo claro. Los hex de marca (temas oscuros) no cambian; estas son sus variantes
       oscurecidas. --green/--red (+2) son los colores de P&L y quedan EXACTAMENTE como estaban en
       body.theme-light (restricción P26): 3,6:1 sobre --bg1, por debajo de AA — ver docs/COLOR_AUDIT.md.
       El resto sube de luminosidad (OKLCH, mismo tono y croma) hasta ≥ 4,5:1 sobre --bg0…--bg2. */
    --green:  #059669;
    --green2: #10b981;
    --red:    #dc2626;
    --red2:   #f87171;
    --amber:  #995100;
    --blue:   #1c59e0;
    --purple: #7a37ea;
    --gold:   #a54900;
    --cyan:   #006d88;
    /* P33: --blue2 de marca (#4ea8f5) daba 2,44:1 sobre --bg1 (< 3:1); es el --blue2 que el Hub ya usaba en White.
       --purple2 (#9f7aea) da 3,12:1 y no necesita variante. tests/neutral-scale.test.cjs exige ≥ 3:1 a los siete acentos. */
    --blue2:  #1a5fa8;
    /* Solo Hub: las escribía applyThemeVariables() en línea para White (en los oscuros valen las de su :root). */
    --blue-light: #5b3eb5;
    --blue-mid:   #3d2a8a;
    --chart-tick-color: var(--text0);
    --dim-a: 12%;
    --edge-a: 34%;
    /* Sombra tintada con el propio texto: levanta el panel (--bg1) sobre la página (--bg0) sin borde duro */
    --shadow-panel: 0 1px 2px color-mix(in srgb, var(--text0) 7%, transparent), 0 3px 12px color-mix(in srgb, var(--text0) 5%, transparent);
    --glow-g: 0 0 12px color-mix(in srgb, var(--green) 20%, transparent);
    --glow-a: 0 0 12px color-mix(in srgb, var(--amber) 20%, transparent);
    --glow-r: 0 0 12px color-mix(in srgb, var(--red) 20%, transparent);
    color-scheme: light;
}

html[data-theme="white"] body {
    background: var(--bg0);
    color: var(--fg0);
}
/* /NUEVO: theme-white */

/* ── Derivados comunes a los cuatro temas ───────────────────────────────────
   Se calculan con color-mix() sobre los propios acentos y neutros (cero hex nuevos), así que
   "respiran" sobre cualquier fondo y siguen al tema. --dim-a / --edge-a fijan la intensidad de cada
   tema (rgba .06–.15 para el fondo tenue, ~.3 para el borde). Se declaran en el mismo elemento que
   los acentos (html) para que var(--green) se resuelva con el valor del tema activo. */
html[data-theme],
html[data-theme] body {
    --green-dim:  color-mix(in srgb, var(--green)  var(--dim-a), transparent);
    --amber-dim:  color-mix(in srgb, var(--amber)  var(--dim-a), transparent);
    --red-dim:    color-mix(in srgb, var(--red)    var(--dim-a), transparent);
    --blue-dim:   color-mix(in srgb, var(--blue)   var(--dim-a), transparent);
    --purple-dim: color-mix(in srgb, var(--purple) var(--dim-a), transparent);
    --gold-dim:   color-mix(in srgb, var(--gold)   var(--dim-a), transparent);
    --green-edge:  color-mix(in srgb, var(--green)  var(--edge-a), transparent);
    --amber-edge:  color-mix(in srgb, var(--amber)  var(--edge-a), transparent);
    --red-edge:    color-mix(in srgb, var(--red)    var(--edge-a), transparent);
    --blue-edge:   color-mix(in srgb, var(--blue)   var(--edge-a), transparent);
    --purple-edge: color-mix(in srgb, var(--purple) var(--edge-a), transparent);
    --gold-edge:   color-mix(in srgb, var(--gold)   var(--edge-a), transparent);
    --row-hover: color-mix(in srgb, var(--text0) 5%, transparent);
    --row-sep:   color-mix(in srgb, var(--border) 40%, transparent);
}