/* videla-ui: tokens. Colores de diseno/DISENO.md (shadcn neutro). Cada sitio fija su acento. */

:root {
  color-scheme: light;
  --fuente: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #6f6f6f;
  --border: #e5e5e5;
  --input: #d4d4d4;
  --hover: #f5f5f5;
  --urgente: #dc2626;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05);
  --velo: rgba(0, 0, 0, .5);
  /* Acento por defecto: índigo (finanzas). Paso 700 en claro, 400 en oscuro. */
  --acento: #4338ca;
  --acento-fg: #ffffff;
  --acento-hover: #3730a3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #171717;
    --muted: #262626;
    --muted-foreground: #a3a3a3;
    --border: rgba(255, 255, 255, .1);
    --input: rgba(255, 255, 255, .18);
    --hover: #262626;
    --urgente: #f87171;
    --sombra: none;
    --velo: rgba(0, 0, 0, .7);
    --acento: #818cf8;
    --acento-fg: #1e1b4b;
    --acento-hover: #a5b4fc;
  }
}
[data-tema="oscuro"] {
  color-scheme: dark;
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --border: rgba(255, 255, 255, .1);
  --input: rgba(255, 255, 255, .18);
  --hover: #262626;
  --urgente: #f87171;
  --sombra: none;
  --velo: rgba(0, 0, 0, .7);
  --acento: #818cf8;
  --acento-fg: #1e1b4b;
  --acento-hover: #a5b4fc;
}

/*
 * Escalas. Cada una copia un producto real medido con getComputedStyle (2026-10-16):
 * 16 = Primer de GitHub (cuerpo 16/24), 17 = iOS y la documentación de shadcn en el teléfono,
 * 19 = GOV.UK (cuerpo 19/25, h2 24/30). Ninguna etiqueta baja de 14.
 * José eligió la 19 (2026-10-16) y al verla publicada la encontró muy grande: desde 0.2.0 la de :root es la 17.
 */
[data-escala="16"] {
  --texto: 16px; --texto-lh: 24px;
  --texto-2: 14px; --texto-2-lh: 20px;
  --titulo-1: 28px; --titulo-1-lh: 36px;
  --titulo-2: 20px; --titulo-2-lh: 28px;
  --titulo-3: 17px; --titulo-3-lh: 24px;
  --cifra: 36px; --cifra-lh: 44px;
  --control: 40px; --control-texto: 15px; --control-pad: 16px; --campo-pad: 12px;
  --fila: 52px; --cabecera: 60px; --icono: 16px; --casilla: 18px;
  --caja-pad: 20px; --radio-control: 8px; --radio-caja: 12px;
}
:root, [data-escala="17"] {
  --texto: 17px; --texto-lh: 26px;
  --texto-2: 15px; --texto-2-lh: 22px;
  --titulo-1: 32px; --titulo-1-lh: 40px;
  --titulo-2: 21px; --titulo-2-lh: 28px;
  --titulo-3: 18px; --titulo-3-lh: 26px;
  --cifra: 40px; --cifra-lh: 48px;
  --control: 44px; --control-texto: 16px; --control-pad: 18px; --campo-pad: 14px;
  --fila: 56px; --cabecera: 64px; --icono: 18px; --casilla: 20px;
  --caja-pad: 24px; --radio-control: 10px; --radio-caja: 14px;
}
[data-escala="19"] {
  --texto: 19px; --texto-lh: 25px;
  --texto-2: 16px; --texto-2-lh: 20px;
  --titulo-1: 36px; --titulo-1-lh: 40px;
  --titulo-2: 24px; --titulo-2-lh: 30px;
  --titulo-3: 19px; --titulo-3-lh: 25px;
  --cifra: 44px; --cifra-lh: 52px;
  --control: 48px; --control-texto: 18px; --control-pad: 20px; --campo-pad: 16px;
  --fila: 64px; --cabecera: 68px; --icono: 20px; --casilla: 24px;
  --caja-pad: 24px; --radio-control: 10px; --radio-caja: 14px;
}