/**
 * PaMapp — sistema "Sereno", puerto a web.
 *
 * Espejo de `pamapp-app/src/theme/tokens.ts`. Si allá cambia un valor, cambia acá.
 *
 * Reemplaza al puerto del sistema "Papel" (crema + Literata + terracota + Inter),
 * que quedó viejo el 24/8/2026 cuando la app cambió de línea: quien veía este
 * sitio y después abría la app veía dos productos distintos. La razón del cambio
 * está en el vault; acá lo que importa es que los valores son los de la app.
 *
 * Reglas heredadas, las dos:
 *
 * - EL COLOR SIGNIFICA ESTADO: terracota (atención/vencido), azul (próximo),
 *   salvia (confirmado). En Sereno la acción primaria COMPARTE el salvia con lo
 *   confirmado, porque la acción es progreso — es el patrón de las apps de salud
 *   y es el cambio deliberado respecto de Papel, donde la acción era tinta.
 * - LA MARCA VIVE FUERA DE LA APP: ícono, tienda y este sitio. El ocre aparece
 *   sólo donde aparece la marca —cabecera, pie, favicon, tarjeta social— y no
 *   pinta botones ni fondos ni acentos.
 */

:root {
  /* --- Superficies. Blanco verdoso calmo, no blanco puro ni crema. --- */
  --paper: #f7faf9;
  --surface: #ffffff;
  --sunken: #ecf2ef;

  /* --- Tinta: verde-gris profundo. --- */
  --ink: #22302d;
  --ink-muted: #62776f;
  --ink-subtle: #5f736b;
  /* Texto de ejemplo dentro de un campo vacío, y NADA más: legible y claramente
     por debajo de la tinta ingresada, para que nadie confunda un ejemplo con un
     dato ya cargado. */
  --ink-placeholder: #93a39c;

  /* --- Líneas --- */
  --line: #e1eae6;
  --line-strong: #c8d6d0;

  /* --- Marca. Sólo donde aparece la marca. --- */
  --brand: #d98c1f;
  /* Tinta y crema del ícono. Son más profundas que --ink y --paper a propósito:
     el ícono se lee a 40 px sobre ocre, no sobre papel. Espejo de
     `scripts/generate-brand-assets.py`. */
  --brand-ink: #17120c;
  --brand-cream: #f7efe0;

  /* --- Estado. Nada más usa color.
         Contrastes medidos contra --paper: ink 13,1:1 · ink-muted 4,6:1 ·
         salvia 4,6:1 · terracota 4,7:1 · azul 4,9:1 · blanco sobre salvia 4,9:1.
         Todos AA para texto normal. --- */
  --attention: #b0563c;
  --attention-surface: #faede6;
  --upcoming: #41729e;
  --upcoming-surface: #e9f1f8;
  --done: #3e7c6f;
  --done-surface: #e2efea;

  /* --- Acción primaria: salvia. En Sereno la acción ES progreso. --- */
  --action: #3e7c6f;
  --action-ink: #ffffff;

  /* --- Tipografía. Nunito para todo: la serif quedó fuera de la app, y este
         sitio es la puerta de la app. --- */
  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Base 17, no 16: quien lee esto tiene entre 40 y 70 y lee de apuro. */
  --text-micro: 0.75rem;
  --text-caption: 0.8125rem;
  --text-small: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-title: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-headline: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --text-display: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1.55rem + 3.9vw, 4.75rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  /* --- Ritmo. Escala 4pt, igual que la app. --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 2rem;
  --space-4xl: 2.5rem;
  --space-5xl: 3.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* --- Radios --- */
  /* Sereno vive en las esquinas: los radios son más generosos que en Papel. */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Elevación. La sombra tiene el tinte de la tinta, no un gris neutro:
         un gris puro sobre fondo verdoso se ve sucio. --- */
  --shadow-card: 0 2px 10px rgb(34 48 45 / 0.05);
  --shadow-raised: 0 6px 20px rgb(34 48 45 / 0.09);
  --shadow-lifted: 0 24px 60px -20px rgb(34 48 45 / 0.22);

  /* --- Motion --- */
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --measure: 34rem;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --max-width: 78rem;
}