/* ═══════════════════════════════════════════════════════
   TOKENS — Fleet Dashboard v5
   Cromo neutro, datos con color.

   La interfaz usa un único acento; toda la vibración cromática se reserva
   para las series de datos. Las paletas de datos están validadas para banda
   de luminosidad, piso de croma, separación para daltónicos y contraste
   contra la superficie real de las tarjetas, en claro y en oscuro.
   ═══════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ── Superficies ──
       El fondo de página se mantiene claramente por debajo del blanco de las
       tarjetas: con los dos casi al mismo valor, los gráficos no se delimitan
       y la página se lee como una sola mancha blanca. */
    --page:            #e7eaf0;
    --surface:         #ffffff;
    --surface-raised:  #ffffff;
    --surface-sunken:  #f2f4f8;
    --surface-hover:   #f5f7fa;
    --sidebar-bg:      #0f1620;
    --sidebar-hover:   #1b2533;
    --sidebar-active:  rgba(42,120,214,0.16);

    /* ── Tinta ── */
    --ink:             #0f172a;
    --ink-secondary:   #4a5568;
    --ink-muted:       #78849a;
    --ink-inverse:     #ffffff;
    --sidebar-ink:     #aab6c6;
    --sidebar-ink-dim: #6b7789;

    /* ── Bordes y separadores ── */
    --border:          rgba(15,23,42,0.13);
    --border-strong:   rgba(15,23,42,0.20);
    --grid-line:       rgba(15,23,42,0.09);
    --axis-line:       rgba(15,23,42,0.16);

    /* ── Acento único de interfaz ── */
    --accent:          #2a78d6;
    --accent-hover:    #1c5cab;
    --accent-soft:     rgba(42,120,214,0.10);
    --accent-ring:     rgba(42,120,214,0.28);

    /* ── Estados (icono + etiqueta siempre; nunca color solo) ── */
    --status-good:     #0ca30c;
    --status-warning:  #fab219;
    --status-serious:  #ec835a;
    --status-critical: #d03b3b;
    --delta-up:        #006300;
    --delta-down:      #c0392b;

    /* ── Paleta categórica de datos (orden fijo, nunca cíclico) ── */
    --series-1: #2a78d6;   /* azul    */
    --series-2: #eb6834;   /* naranja */
    --series-3: #1baf7a;   /* aqua    */
    --series-4: #eda100;   /* ámbar   */
    --series-5: #e87ba4;   /* magenta */
    --series-6: #008300;   /* verde   */
    --series-7: #4a3aa7;   /* violeta */
    --series-8: #e34948;   /* rojo    */

    /* ── Rampa secuencial (magnitud continua: mapas, heatmaps) ── */
    --seq-1: #cde2fb;
    --seq-2: #9ec5f4;
    --seq-3: #6da7ec;
    --seq-4: #3987e5;
    --seq-5: #256abf;
    --seq-6: #184f95;
    --seq-7: #0d366b;

    /* ── Sombras: el borde hace el trabajo, la sombra sólo despega la tarjeta ── */
    --shadow-sm:  0 1px 2px rgba(15,23,42,0.05), 0 1px 1px rgba(15,23,42,0.03);
    --shadow-md:  0 4px 16px rgba(15,23,42,0.09);
    --shadow-lg:  0 16px 48px rgba(15,23,42,0.16);

    /* ── Radios ── */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-pill: 999px;

    /* ── Espaciado (grilla de 4px) ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;

    /* ── Tipografía ── */
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --t-2xs: 10.5px;
    --t-xs:  11.5px;
    --t-sm:  12.5px;
    --t-md:  13.5px;
    --t-lg:  15px;
    --t-xl:  18px;
    --t-2xl: 24px;
    --t-3xl: 30px;

    /* ── Layout ── */
    --sidebar-w:           248px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:            56px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════
   MODO OSCURO
   Pasos propios elegidos para la superficie oscura, no un volteo automático
   de los claros. Ambas paletas revalidadas contra --surface oscuro.
   ═══════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
    color-scheme: dark;

    --page:            #0b0f16;
    --surface:         #141a24;
    --surface-raised:  #1a212d;
    --surface-sunken:  #0f141d;
    --surface-hover:   #1e2632;
    --sidebar-bg:      #080b11;
    --sidebar-hover:   #161d28;
    --sidebar-active:  rgba(57,135,229,0.18);

    --ink:             #f1f5f9;
    --ink-secondary:   #b4c0d1;
    --ink-muted:       #7f8da3;
    --ink-inverse:     #0b0f16;
    --sidebar-ink:     #9aa7b8;
    --sidebar-ink-dim: #5d6878;

    --border:          rgba(255,255,255,0.08);
    --border-strong:   rgba(255,255,255,0.16);
    --grid-line:       rgba(255,255,255,0.07);
    --axis-line:       rgba(255,255,255,0.14);

    --accent:          #3987e5;
    --accent-hover:    #5598e7;
    --accent-soft:     rgba(57,135,229,0.14);
    --accent-ring:     rgba(57,135,229,0.35);

    --delta-up:        #0ca30c;
    --delta-down:      #e66767;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --seq-1: #0d366b;
    --seq-2: #184f95;
    --seq-3: #256abf;
    --seq-4: #2a78d6;
    --seq-5: #3987e5;
    --seq-6: #6da7ec;
    --seq-7: #9ec5f4;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
}

/* Preferencia del sistema cuando el usuario no eligió tema explícitamente.
   El sello data-theme del toggle gana en ambas direcciones. */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;

        --page:            #0b0f16;
        --surface:         #141a24;
        --surface-raised:  #1a212d;
        --surface-sunken:  #0f141d;
        --surface-hover:   #1e2632;
        --sidebar-bg:      #080b11;
        --sidebar-hover:   #161d28;
        --sidebar-active:  rgba(57,135,229,0.18);

        --ink:             #f1f5f9;
        --ink-secondary:   #b4c0d1;
        --ink-muted:       #7f8da3;
        --ink-inverse:     #0b0f16;
        --sidebar-ink:     #9aa7b8;
        --sidebar-ink-dim: #5d6878;

        --border:          rgba(255,255,255,0.08);
        --border-strong:   rgba(255,255,255,0.16);
        --grid-line:       rgba(255,255,255,0.07);
        --axis-line:       rgba(255,255,255,0.14);

        --accent:          #3987e5;
        --accent-hover:    #5598e7;
        --accent-soft:     rgba(57,135,229,0.14);
        --accent-ring:     rgba(57,135,229,0.35);

        --delta-up:        #0ca30c;
        --delta-down:      #e66767;

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
        --series-6: #008300;
        --series-7: #9085e9;
        --series-8: #e66767;

        --seq-1: #0d366b;
        --seq-2: #184f95;
        --seq-3: #256abf;
        --seq-4: #2a78d6;
        --seq-5: #3987e5;
        --seq-6: #6da7ec;
        --seq-7: #9ec5f4;

        --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
        --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
        --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
    }
}