/* tokens.css - colores, tipografía, espacios. Colores tomados del prototipo (config.js, marca COPRIK).
   Contrastes sobre blanco: primario 8,6:1; texto 15:1; texto2 6,3:1; error 6,5:1; ok 6,4:1. */
:root {
  --primario: #0a42a7;
  --secundario: #003e71;
  --acento: #a20731;
  --fondo: #ffffff;
  --fondo-alt: #f3f3f2;
  --superficie: #eef3fa;
  --celeste: #8ecbfe;           /* solo decorativo y foco sobre oscuro; nunca texto blanco encima */
  --texto: #24232a;
  --texto2: #5a5f6b;
  --borde: #7a8496;             /* borde de campos: 3:1 sobre blanco */
  --borde-suave: #dde3ec;
  --ok: #1e6b3a;
  --error: #b42318;
  --aviso: #6b4e00;
  --ejemplo-fondo: #fff4d6;
  --ejemplo-texto: #6b4e00;
  --ejemplo-borde: #b8860b;

  --f-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Playfair Display", Georgia, serif;

  --sombra-1: 0 1px 2px rgb(0 30 60 / 6%), 0 2px 8px rgb(0 30 60 / 6%);
  --sombra-2: 0 8px 24px rgb(0 30 60 / 14%);
  --r-input: 12px;
  --r-card: 16px;
  --r-pill: 999px;
  --gutter: 16px;
  --tactil: 48px;               /* área táctil mínima de todo control */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }