/* public/css/tokens.css — tokens de diseño (D §3). Los componentes nunca usan hex directos.
   El bloque de prefers-color-scheme repite el tema oscuro (lo comprueba tests/frontend/contraste.test.mjs). */
:root,
:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #E9EEF3;
  --superficie: #F5F7FA;
  --superficie-alta: #FFFFFF;
  --texto: #0F1B2D;
  --texto-2: #3B4A60;
  --texto-3: #56657B;
  --linea: #C3CDD9;
  --linea-control: #6F7F95;
  --tinta: #1D4F91;
  --sobre-tinta: #FFFFFF;
  --custodia: #11704A;
  --pendiente: #8A5A00;
  --pendiente-lomo: #F2C14E;
  --alerta: #B3261E;
  --foco: #1D4F91;
  --foco-halo: #F2C14E;
  --tinta-suave: rgba(29, 79, 145, 0.12);
  --custodia-suave: rgba(17, 112, 74, 0.12);
  --pendiente-suave: rgba(242, 193, 78, 0.22);
  --alerta-suave: rgba(179, 38, 30, 0.12);
  --hover-fila: rgba(15, 27, 45, 0.04);
  --sombra-capa: 0 12px 32px rgba(15, 27, 45, 0.18);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0B1426;
  --superficie: #121E35;
  --superficie-alta: #1A2846;
  --texto: #E8EEF7;
  --texto-2: #AEBBD0;
  --texto-3: #8A9AB3;
  --linea: #2A3A5A;
  --linea-control: #6A7FA3;
  --tinta: #7FAEF5;
  --sobre-tinta: #0B1426;
  --custodia: #4FCB95;
  --pendiente: #F2C14E;
  --pendiente-lomo: #F2C14E;
  --alerta: #FF8A80;
  --foco: #F2C14E;
  --foco-halo: #0B1426;
  --tinta-suave: rgba(127, 174, 245, 0.14);
  --custodia-suave: rgba(79, 203, 149, 0.14);
  --pendiente-suave: rgba(242, 193, 78, 0.14);
  --alerta-suave: rgba(255, 138, 128, 0.14);
  --hover-fila: rgba(232, 238, 247, 0.04);
  --sombra-capa: 0 12px 32px rgba(3, 6, 15, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --fondo: #0B1426;
    --superficie: #121E35;
    --superficie-alta: #1A2846;
    --texto: #E8EEF7;
    --texto-2: #AEBBD0;
    --texto-3: #8A9AB3;
    --linea: #2A3A5A;
    --linea-control: #6A7FA3;
    --tinta: #7FAEF5;
    --sobre-tinta: #0B1426;
    --custodia: #4FCB95;
    --pendiente: #F2C14E;
    --pendiente-lomo: #F2C14E;
    --alerta: #FF8A80;
    --foco: #F2C14E;
    --foco-halo: #0B1426;
    --tinta-suave: rgba(127, 174, 245, 0.14);
    --custodia-suave: rgba(79, 203, 149, 0.14);
    --pendiente-suave: rgba(242, 193, 78, 0.14);
    --alerta-suave: rgba(255, 138, 128, 0.14);
    --hover-fila: rgba(232, 238, 247, 0.04);
    --sombra-capa: 0 12px 32px rgba(3, 6, 15, 0.55);
  }
}

:root {
  --letra: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Escala 1,25 sobre 15 px (rem = 16 px, respeta el zoom del navegador) */
  --letra-12: 0.75rem;
  --letra-13: 0.8125rem;
  --letra-15: 0.9375rem;
  --letra-19: 1.1875rem;
  --letra-24: 1.5rem;
  --letra-30: 1.875rem;
  --letra-38: 2.375rem;
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem;
  --radio-control: 6px;
  --radio-carpeta: 10px;
  --radio-modal: 14px;
  --radio-chip: 999px;
}