/*
 * Tokens de diseño de TAP_TAP (dirección «Subrayado»).
 * Documentados en docs/DISENO.md. Los cortes de pantalla no pueden ser variables CSS:
 *   --bp-sm 600px · --bp-md 900px · --bp-lg 1200px (se repiten literalmente en las media queries).
 */
:root {
  /* Marca */
  --c-indigo: #141A4A;        /* añil nocturno: fondo oscuro principal, texto sobre claro */
  --c-indigo-raised: #1D2462; /* superficies elevadas sobre añil */
  --c-indigo-line: #343C80;   /* bordes sobre añil */
  --c-rosa: #E5007D;          /* rosa mexicano: el subrayado y la acción principal */
  --c-rosa-press: #C2006A;
  --c-cal: #F3F1F8;           /* fondo claro */
  --c-white: #FFFFFF;
  --c-piedra: #8B8FA8;        /* texto secundario sobre añil (5.2:1) */
  --c-piedra-raised: #9397B0; /* texto secundario sobre superficies elevadas (4.9:1 sobre --c-indigo-raised) */
  --c-piedra-ink: #565B78;    /* texto secundario sobre cal o blanco (5.5:1) */
  --c-line: #DCDAE6;          /* bordes sobre claro */
  --c-control: #7E8092;       /* borde de los campos de formulario: 3.9:1 sobre blanco (WCAG 1.4.11) */

  /* Estados */
  --c-success: #0B7356;
  --c-success-bg: #E3F4EE;
  --c-error: #B8173A;
  --c-error-bg: #FBE7EB;
  --c-warning: #7F5300;
  --c-warning-bg: #FBF0D9;
  --c-info: #2A47C2;
  --c-info-bg: #E6EAFB;

  /* Roles (se reasignan dentro de .on-dark) */
  --color-bg: var(--c-cal);
  --color-surface: var(--c-white);
  --color-text: var(--c-indigo);
  --color-muted: var(--c-piedra-ink);
  --color-line: var(--c-line);
  --color-accent: var(--c-rosa);
  --color-focus: var(--c-rosa);

  /* Tipografía: una sola familia; el ancho expandido es la voz de los titulares */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stretch-display: 125%;
  --stretch-text: 100%;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-display: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  --fs-title: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --lh-tight: 1.02;
  --lh-heading: 1.15;
  --lh-text: 1.6;
  --measure: 66ch;

  /* Espacio (base 4 px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --page-max: 75rem;

  /* Forma: el subrayado es recto; lo interactivo, apenas redondeado */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 22px;
  --bar: 0.3em;            /* grosor del subrayado relativo al texto */
  --border: 1px solid var(--color-line);

  /* Sombra: solo para objetos físicos (teléfono, placa) */
  --shadow-object: 0 40px 80px -30px rgba(6, 8, 30, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
}

/* Vuelve a los roles claros dentro de una sección oscura. */
.on-light {
  --color-bg: var(--c-cal);
  --color-surface: var(--c-white);
  --color-text: var(--c-indigo);
  --color-muted: var(--c-piedra-ink);
  --color-line: var(--c-line);
  --color-focus: var(--c-rosa);
  --border: 1px solid var(--color-line);
}

.on-dark {
  --color-bg: var(--c-indigo);
  --color-surface: var(--c-indigo-raised);
  --color-text: var(--c-cal);
  --color-muted: var(--c-piedra);
  --color-line: var(--c-indigo-line);
  --color-focus: var(--c-cal);
  /* Se redeclara: una variable que usa otra se resuelve donde se define, no donde se usa. */
  --border: 1px solid var(--color-line);
}