/* Design tokens. Única fuente de verdad del color: ni el JS ni el marcado
   deben llevar valores hex literales. */

:root {
    color-scheme: light;

    /* Marca (paleta SLDS) */
    --brand: #0070d2;
    --brand-strong: #005fb2;
    --brand-soft: #eaf3fc;
    --brand-contrast: #ffffff;

    /* Semánticos */
    --ok: #2e844a;
    --danger: #c23934;
    --warn: #dd7a01;
    --neutral: #706e6b;

    /* Superficies */
    --bg: #ffffff;
    --bg-sunken: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-3: #e9ecef;
    --overlay: rgba(16, 24, 40, 0.45);

    /* Texto */
    --text: #181818;
    --text-muted: #5c6d80;
    --text-faint: #8a94a6;
    --text-on-accent: #ffffff;

    /* Bordes */
    --border: #dee2e6;
    --border-strong: #ced4da;
    /* Separador de listas densas: más tenue que --border, que a 400 filas pesa */
    --separator: #edf0f3;

    /* Estados */
    --hover: #eef2f6;
    --active: var(--brand-soft);
    --mark-bg: #ffe28a;
    --mark-text: #181818;

    /* Tipografía */
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
    --fs-xs: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-md: 0.92rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.35rem;

    /* Espaciado */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Formas */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
    --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.12);
    --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.22);

    /* Layout */
    --sidebar-w: 320px;
    --topbar-h: 52px;
    --row-h: 38px;

    /* Densidad de tabla (la alterna prefs.js) */
    --cell-pad-y: 8px;
    --cell-pad-x: 10px;
}

:root[data-density="compact"] {
    --cell-pad-y: 3px;
    --cell-pad-x: 8px;
    --fs-md: 0.86rem;
}

/* Tema oscuro: solo cuando el usuario lo pide con el toggle. No se sigue
   `prefers-color-scheme` a propósito — el tema por defecto es claro. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --brand: #4aa3ff;
    --brand-strong: #7bbcff;
    --brand-soft: #15304a;
    --brand-contrast: #06121f;

    --ok: #45c65a;
    --danger: #ff6b63;
    --warn: #f0a13a;
    --neutral: #9aa0a6;

    --bg: #14181d;
    --bg-sunken: #0f1317;
    --surface: #1a1f26;
    --surface-2: #1f252d;
    --surface-3: #272e38;
    --overlay: rgba(0, 0, 0, 0.6);

    --text: #e6e9ee;
    --text-muted: #a3adbb;
    --text-faint: #78828f;
    --text-on-accent: #06121f;

    --border: #2c343e;
    --border-strong: #3a4450;
    --separator: #222932;

    --hover: #232a33;
    --active: var(--brand-soft);
    --mark-bg: #7a5c00;
    --mark-text: #fff6d8;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.7);
}