/*
 * merlis tags — tokens compartidos (002-rediseno-interfaz, T-001)
 * ================================================================
 *
 * Única fuente de color, tipo, espacio, forma y movimiento para las tres
 * superficies: web de presentación (/), panel (/panel/) y ficha pública
 * (/t/<token>/). Ninguna hoja de estilo usa un hex, un tamaño o una
 * duración que no salga de aquí (ADR-005).
 *
 * Dirección: «One motif» (design-taste-frontend, seed 1470842685).
 * Idea: el punto redondo donde el móvil toca la etiqueta (la pegatina NFC
 * de 25 mm, la «moneda» de la pulsera) es la única forma del sistema: el
 * disco gigante, el escenario de la ficha, la máscara de cada foto, el
 * botón, la viñeta. La pulsera, con su URL secreta, es la banda.
 * Detalle completo, proporciones y cómo trasladarlo al panel y a la ficha:
 * specs/002-rediseno-interfaz/research.md
 *
 * Carga: web y panel enlazan fonts.css + tokens.css; la ficha solo
 * tokens.css (usa --font-system). Este fichero contiene solo custom
 * properties: ningún recurso que la CSP de la ficha (default-src 'none')
 * tenga que bloquear.
 *
 * Reglas de la casa que aplican a TODAS las superficies:
 *   sin degradados · sin sombras en reposo (solo lo que flota: menú, diálogo)
 *   · sin líneas finas como adorno (sí en tablas y campos de formulario)
 *   · sin etiquetas pequeñas en mayúsculas espaciadas · sin monoespaciada
 *   fuera de código · sin numeración 01/02 · sin cristal ni desenfoque
 *   · sin violeta ni crema-terracota · una familia tipográfica.
 *
 * Forma: dos radios y nada más. Lo rectangular es recto (--radius-none);
 * lo que es «la etiqueta» es redondo (--radius-round: píldora o disco).
 * Nunca el radio blando de 8–16 px.
 *
 * Contraste (WCAG 2.1, verificado):
 *   ink/ground 19.6 · ink/surface 17.6 · ink-soft/ground 5.38
 *   · ink-soft/surface 4.83 · on-accent/accent 5.27 · accent-text/ground 6.12
 *   · accent-text/surface 5.50 · ink/field-1 9.40 · ink/field-2..4 > 15
 *   · line-strong/ground 3.86 · line-strong/surface 3.46 (bordes de control)
 *   Oscuro: ink/ground 17.2 · ink-soft/ground 7.71 · ink-soft/surface 6.59
 *   · accent/ground 6.45 · on-accent/accent 7.35 · accent-text/surface 5.51
 *   · line-strong/surface 4.54
 *   OJO: --color-accent como TEXTO sobre --color-surface en claro da 4.41;
 *   para texto usa siempre --color-accent-text.
 */

:root {
  color-scheme: light;

  /* ---- Color: papel neutro, tinta negra, un magenta ---------------------
     Proporción: suelo 70–90 % · tinta en texto y marcas · acento < 5 % de
     cada pantalla (la acción principal y el disco). Los campos pastel son
     secciones o bloques enteros, nunca dos iguales juntos, cada uno con su
     tinta (--color-on-field). */
  --color-ground: #f7f7f5;      /* suelo de página */
  --color-surface: #ebebe8;     /* un paso de tono: paneles, campos, filas */
  --color-surface-strong: #dcdcd8; /* segundo paso, solo hover/pulsado */
  --color-ink: #000000;         /* texto y marcas fuertes */
  --color-ink-soft: #666662;    /* texto secundario (>= 4.5:1 en ground y surface) */
  --color-accent: #d0106f;      /* magenta: acción principal, disco, marca */
  --color-on-accent: #ffffff;   /* texto sobre el acento */
  --color-accent-text: #b50e60; /* enlaces y texto en acento (AA en todo suelo) */
  --color-field-1: #97aaf6;     /* pervinca */
  --color-field-2: #bbf697;     /* lima */
  --color-field-3: #fed878;     /* ámbar */
  --color-field-4: #6ef8fb;     /* cian */
  --color-on-field: #000000;    /* tinta sobre cualquier campo */
  --color-inverse: #000000;     /* bloque invertido (panel hondo, pie) */
  --color-on-inverse: #f7f7f5;
  --color-on-inverse-soft: #a8a8a2;

  /* Roles de estado (panel y ficha). El magenta ES el color de alerta de la
     identidad: alergias, revocar, dar de baja. Los estados de etiqueta usan
     campos: Libre = field-1, Asignada = field-2, Revocada = surface + ink. */
  --color-alert: var(--color-accent);
  --color-alert-text: var(--color-accent-text);
  --color-on-alert: var(--color-on-accent);
  --color-ok: var(--color-field-2);
  --color-info: var(--color-field-1);
  --color-warn: var(--color-field-3);

  /* Líneas: SOLO en tablas y campos de formulario (ADR-005). */
  --color-line: #c9c9c4;        /* separador de filas de tabla (decorativo) */
  --color-line-strong: #7d7d78; /* borde de campo/control: >= 3:1 (WCAG 1.4.11) */
  --line-width: 1px;
  --color-focus: var(--color-accent);
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* ---- Tipo: Jost, una familia ----------------------------------------- */
  --font-sans: "Jost", "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS",
    system-ui, sans-serif;
  /* Sin fuentes web (ficha pública): geométricas del sistema primero. */
  --font-system: "Futura", "Avenir Next", "Century Gothic", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Cinco tamaños, ni uno más. */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);   /* 14–15 notas, créditos */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19 texto corrido */
  --step-lead: clamp(1.375rem, 1.05rem + 1.25vw, 2.25rem);     /* 22–36 frases, cifras, listas */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);              /* 32–64 títulos de sección */
  --step-display: clamp(2.5rem, 0.6rem + 6.4vw, 6.25rem);      /* 40–100 el titular */

  --weight-text: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --leading-display: 0.92;   /* display en mayúsculas, 700, -0.03em */
  --leading-head: 1;
  --leading-lead: 1.2;
  --leading-text: 1.5;
  --tracking-display: -0.03em;
  --tracking-head: -0.02em;
  --tracking-text: 0;
  --measure: 62ch;           /* 45–75 caracteres */
  --measure-narrow: 38ch;

  /* ---- Espacio ---------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);            /* margen lateral: 16–32 */
  --section-gap: clamp(5rem, 2rem + 10vw, 12.5rem);       /* entre secciones: 80–200 */
  --content-max: 90rem;                                   /* 1440 */
  --tap: 3rem;                                            /* objetivo táctil mínimo 48 */

  /* ---- Forma: recto o redondo ------------------------------------------ */
  --radius-none: 0;
  --radius-round: 999px;  /* píldora: botones, chips, campos de la web */
  --radius-disc: 50%;     /* disco: fotos, avatar, viñetas, el motivo */

  /* Solo para lo que flota de verdad (menú desplegable, diálogo). */
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.18);

  /* ---- Movimiento ------------------------------------------------------- */
  --dur-fast: 150ms;     /* hover, pulsado */
  --dur-base: 300ms;     /* cambios de estado, el demostrador */
  --dur-enter: 700ms;    /* entradas de sección */
  --dur-fade: 1600ms;    /* fundido lento de la foto principal */
  --stagger: 80ms;       /* escalonado de entradas */
  --rise: 24px;          /* recorrido de entrada */
  --press-scale: 0.97;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
}

/* ---- Modo oscuro: mismas proporciones, suelo hondo -------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-ground: #141413;
    --color-surface: #232321;
    --color-surface-strong: #31312e;
    --color-ink: #f7f7f5;
    --color-ink-soft: #a8a8a2;
    --color-accent: #ff5ca8;
    --color-on-accent: #000000;
    --color-accent-text: #ff5ca8;
    --color-inverse: #000000;
    --color-on-inverse: #f7f7f5;
    --color-on-inverse-soft: #a8a8a2;
    --color-line: #4a4a46;
    --color-line-strong: #8a8a85;
    /* Los campos pastel y su tinta negra no cambian: son la identidad. */
  }
}

/* ---- Movimiento reducido: se conserva el contenido, se quita el viaje --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-enter: 1ms;
    --dur-fade: 1ms;
    --stagger: 0ms;
    --rise: 0px;
    --press-scale: 1;
  }
}