/* HONIRA · check-in semanal · tokens de la identidad (Centro Toni Alonso).
   Monocromo, 0 % de saturación. Único color: el rojo funcional (solo la palabra ROJO).
   Es el ÚNICO fichero de CSS con valores de color: el resto solo usa var(). */
:root {
  --bg: #FFFFFF;
  --ink: #171717;
  --card: #FAFAFA;
  --line: #E8E8E8;
  --muted: #666666;
  --muted-2: #B0B0B0;
  --muted-3: #8A8A8A;      /* AMARILLO cuando hace falta contraste sobre texto pequeño */
  --rojo: #A40E0E;
  --sobre-rojo: #FFFFFF;   /* texto sobre fondo --rojo (igual en los dos esquemas) */
  --inverso: #FFFFFF;      /* texto sobre fondo --ink */

  /* la antesala va siempre en oscuro, sea cual sea el esquema del sistema */
  --oscuro-bg: #0A0A0A;
  --oscuro-ink: #FAFAFA;
  --oscuro-card: #161616;
  --oscuro-line: #2A2A2A;
  --oscuro-velo: #2F2F2F;  /* blanco al 15 % sobre el fondo oscuro: filete de la antesala */
  --oscuro-muted: #A0A0A0;
  --oscuro-muted-2: #6E6E6E;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --texto: 18px;
  --pregunta: 21px;
  --radio: 4px;
  --radio-chip: 999px;
  --col: 720px;
  --gutter: 16px;
  --toque: 44px;
  --chip: 52px;
  --sombra-foco: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);

  /* rejilla de espaciado de 8 px */
  --e0: 4px;
  --e1: 8px;
  --e2: 12px;
  --e3: 16px;
  --e4: 24px;
  --e5: 32px;
  --e6: 48px;

  /* curva y tiempos del movimiento */
  --suave: cubic-bezier(.2, .8, .2, 1);
  --banner-h: 0px;         /* alto de la banda de aviso, lo mide app.js */
  --dock-h: 220px;         /* alto del dock de respuesta, lo mide app.js */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A0A;
    --ink: #FAFAFA;
    --card: #161616;
    --line: #2A2A2A;
    --muted: #A0A0A0;
    --muted-2: #6E6E6E;
    --muted-3: #8A8A8A;
    --inverso: #0A0A0A;
    --rojo: #B33A3A;
    --sobre-rojo: #FFFFFF;
  }
}