/* ZDNS Control — tema oscuro.
 *
 * Sólo tokens: cada regla de portal.css lee estos nombres, así que el tema
 * oscuro es la misma hoja con otra paleta. La página enlaza este archivo con
 * el media que dice cuándo aplica (fleet/theme.py): «screen» si la cuenta
 * eligió Oscuro, «screen and (prefers-color-scheme: dark)» si eligió
 * Automático, «not all» si eligió Claro. Al imprimir, nunca aplica.
 *
 * Va en la capa tokens que declara portal.css y llega después, así que a
 * igual selector gana sin pisar ninguna otra capa.
 *
 * La paleta es el navy de zgh llevado a fondo: superficies que suben de la
 * página (#0a131b) a lo que flota (--surface-raised), texto que baja de
 * #e7eef4 a --muted, y la marca aclarada para leerse sobre oscuro. Cada par
 * de texto y fondo pasa AA (4,5:1; los títulos más de 7:1) y los bordes de
 * los controles 3:1; test_theme lo comprueba con estos mismos valores.
 *
 * Quedan iguales en los dos temas, y por eso no se repiten aquí: el lima y el
 * celeste (sólo van sobre navy), el texto sobre oscuro (--on-dark*), el
 * blanco sobre un relleno sólido (--on-action) y los colores de cada tono en
 * la consola (--*-on-dark), que ya es oscura en el claro.
 */

@layer tokens {
  :root {
    color-scheme: dark;

    /* Superficies, de abajo hacia arriba. */
    --page: #0a131b;
    --surface: #0e1923;
    --surface-soft: #132230;
    --surface-sunken: #1a2b3b;
    --surface-raised: #152535;

    /* Texto. */
    --heading: #e7eef4;
    --text: #c2cdd7;
    --muted: #8ea2b3;
    --faint: #4b5d6c;

    /* Filetes. --line-control mantiene 3:1 contra todas las superficies. */
    --line: #1f3141;
    --line-strong: #2b4054;
    --line-control: #687e91;

    /* Marca: --brand y --brand-deep son texto (enlaces, hover, íconos) y se
     * aclaran; --action es relleno con texto blanco y se queda oscuro. */
    --brand: #72aaea;
    --brand-deep: #9fc8f4;
    --brand-light: #4f94e8;
    --brand-wash: #12304e;
    --action: #2563a8;
    --action-hover: #2f72bd;
    --danger-solid: #c8234b;
    --switch-on: #1f9a55;
    --button-dark: #2563a8;
    --button-dark-hover: #2f72bd;

    /* El navy de la banda y del panel de acceso sube un paso: sobre la página
     * oscura sigue leyéndose como un objeto aparte. */
    --navy-950: #132c40;
    --green-label: #9cc46a;
    --green-wash: #1c2b18;

    /* La consola, más honda que la página y con borde. */
    --console-bg: #08121a;
    --console-border: #2b4054;
    --console-rule: rgba(209, 222, 232, .12);

    /* Tonos: texto / fondo / borde / punto. */
    --ok-fg: #5fd394;      --ok-bg: #0f2a1e;      --ok-border: #1f5a3c;      --ok-dot: #22c55e;
    --warn-fg: #f5c04a;    --warn-bg: #2b220e;    --warn-border: #6a5114;    --warn-dot: #f59e0b;
    --crit-fg: #ff8a9b;    --crit-bg: #33141c;    --crit-border: #75283a;    --crit-dot: #f43f5e;
    --info-fg: #6ccaf5;    --info-bg: #0d2738;    --info-border: #1c5274;    --info-dot: #38bdf8;
    --pending-fg: #8fc0f4; --pending-bg: #112a47; --pending-border: #2a5a92; --pending-dot: #5b9be6;
    --blocked-fg: #c2cdd7; --blocked-bg: #1a2a39; --blocked-border: #314659;
    --neutral-fg: #a9b7c3; --neutral-bg: #142230; --neutral-border: #26394b;

    /* Sombras y anillos: sobre oscuro una sombra apenas se ve, así que lo que
     * flota se separa también por su superficie más clara. */
    --shadow-float: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-segment: 0 1px 2px rgba(0, 0, 0, .5);
    --focus-ring: 0 0 0 3px rgba(114, 170, 234, .32);
    --pulse-ring: 114, 170, 234;

    /* Series de Estadísticas, validadas sobre #0e1923 con validate_palette
     * (banda de luminosidad del oscuro, CVD de todos los pares ≥ 12, normal
     * ≥ 17, contraste ≥ 3:1): azul, naranja, violeta y turquesa, como en el claro. */
    --chart-1: #188ff6;
    --chart-2: #d85b2d;
    --chart-3: #6f55b5;
    --chart-4: #2ea595;
  }
}