/* ════════════════════════════════════════════════════════════════
   TOKENS — única fuente de verdad del sistema de diseño.
   Ningún componente debe declarar un hex o un px suelto: todo sale
   de aquí. El tema oscuro re-declara los MISMOS nombres, por eso
   basta con usar var(--…) para que funcione en ambos temas.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── paleta del proyecto (lo único que cambia por proyecto) ── */
    --color-accent:  #0d9488;   /* teal — acento único del sistema */
    --color-bg:      #f5f8f8;   /* fondo de página, gris con tinte teal */
    --color-surface: #ffffff;   /* paneles y tarjetas */
    --color-text:    #111827;   /* tinta */
    --rojo:          #dc2626;   /* SOLO destructivo */

    /* ── rampa del acento (mismo matiz, distinta luminosidad) ──── */
    --a-100: #f0fdfa;
    --a-200: #ccfbf1;
    --a-300: #5eead4;
    --a-500: #14b8a6;
    --a-600: #0f766e;
    --a-700: #115e59;

    /* Fondo del hover del acento. NO reutilizar --a-600 aquí: en tema oscuro
       ese token es CLARO porque allí sirve de color de TEXTO, y usarlo como
       fondo dejaría el texto blanco del botón invisible (1.48:1). Este se
       mantiene oscuro en ambos temas para que #fff siempre contraste (5.5:1). */
    --color-accent-hover: #0f766e;
    --rojo-hover: #b91c1c;

    /* ── neutrales (fijos, tinte frío) ─────────────────────────── */
    --n-100: #f8fafc;
    --n-200: #eef2f6;
    --n-300: #dde3ea;
    --n-400: #b8c0cb;
    --n-500: #94a0ae;
    --n-600: #6b7684;
    --n-700: #4b5563;
    --n-800: #333c47;
    --n-900: #1f262e;
    --color-divider: #e5e9ef;

    /* ── alerta suave (pendiente, pausado, por vencer) ─────────── */
    --amb-100: #fef3c7;
    --amb-700: #92400e;

    /* ── rojo suave (fondo de estado negativo) ─────────────────── */
    --rojo-100: #fef2f2;

    /* ── tintes categóricos: SOLO para distinguir tarjetas de KPI
       en el dashboard, nunca como acción ni como acento. Cada par
       sigue el patrón fondo-tenue / texto-legible.               ── */
    --sky-100:    #f0f9ff;  --sky-600:    #0284c7;
    --violet-100: #f5f3ff;  --violet-600: #7c3aed;
    --indigo-100: #eef2ff;  --indigo-600: #4f46e5;

    /* ── tipografía ────────────────────────────────────────────── */
    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── espaciado ─────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── forma ─────────────────────────────────────────────────── */
    --radius:      14px;
    --radius-sm:   10px;
    --radius-pill: 999px;

    /* ── elevación ─────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
    --shadow-md: 0 8px 24px rgba(17, 24, 39, .10);

    /* ── shell ─────────────────────────────────────────────────── */
    --sidebar-ancho:  236px;
    --sidebar-rail:   68px;
    --topbar-alto:    57px;
}

/* ════════════════════════════════════════════════════════════════
   TEMA OSCURO — mismos tokens, valores derivados.
   Los neutrales se INVIERTEN y --a-600/700 se vuelven CLAROS porque
   ahí pasan a ser texto sobre fondo oscuro.
   ════════════════════════════════════════════════════════════════ */

html[data-tema="oscuro"] {
    --color-bg:      #0e1514;   /* casi negro con tinte teal */
    --color-surface: #161f1e;
    --color-text:    #e8f0ef;
    --rojo:          #f87171;

    --a-100: #0f2a27;
    --a-200: #143d38;
    --a-300: #2dd4bf;
    --a-500: #2dd4bf;
    --a-600: #5eead4;   /* texto acentuado sobre oscuro */
    --a-700: #99f6e4;

    /* Se mantienen oscuros a propósito: son FONDOS con texto blanco encima,
       no texto. Si siguieran a --a-600/--rojo, el hover borraría la etiqueta. */
    --color-accent-hover: #0f766e;
    --rojo-hover: #b91c1c;

    --n-100: #1b2524;
    --n-200: #222e2d;
    --n-300: #2e3b3a;
    --n-400: #485755;
    --n-500: #7d8d8b;
    --n-600: #9aa9a7;
    --n-700: #bcc8c6;
    --n-800: #d6dfdd;
    --n-900: #edf3f2;
    --color-divider: #26312f;

    --amb-100: #3a2f0e;
    --amb-700: #fcd34d;

    --rojo-100: #3a1a1a;

    /* mismos matices, luminosidades invertidas: el fondo tenue se
       vuelve oscuro y el texto se vuelve claro */
    --sky-100:    #0c2233;  --sky-600:    #7dd3fc;
    --violet-100: #221a3a;  --violet-600: #c4b5fd;
    --indigo-100: #1a1e3a;  --indigo-600: #a5b4fc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
}

/* El navegador debe saber el esquema para pintar scrollbars y
   controles nativos (checkbox, date picker) del color correcto. */
:root            { color-scheme: light; }
html[data-tema="oscuro"] { color-scheme: dark; }