/*
  tokens.css — 07 · INSTITUCIONAL MODERNO / REFORMA DIGITAL DEL ESTADO
  Sede Electrónica — Servicios al Ciudadano
  Dirección: GOV.UK-inspired — austero, ciudadano-céntrico, sin florituras.
  ============================================================
  PALETA: UN solo color vivo (amarillo foco) reservado a interacción.
  Sin gradientes. Sin sombras. Estructura por bordes y espacio.
  ============================================================
*/

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ─── Identidad cromática (GOV.UK) ──────────────────────── */
    --text:    oklch(0.13 0.003 250);   /* casi negro GOV.UK */
    --paper:   oklch(1 0 0);            /* blanco puro para formularios */
    --surface: oklch(0.96 0.004 250);   /* gris claro con matiz azul */

    --link:    oklch(0.52 0.13 250);    /* azul confianza — links/acciones */
    --link-visited: oklch(0.38 0.10 290); /* visitado — violeta oscuro */
    --link-hover: oklch(0.38 0.13 250);  /* hover azul más oscuro */

    /* Amarillo foco GOV.UK — ÚNICO color vivo, SOLO interacción */
    --focus:   oklch(0.88 0.18 100);

    /* ─── Estados (banners, alertas) ───────────────────────── */
    --info:    oklch(0.52 0.13 250);    /* azul */
    --info-bg: oklch(0.95 0.02 250);
    --warn:    oklch(0.78 0.15 80);     /* ámbar */
    --warn-bg: oklch(0.97 0.04 85);
    --err:     oklch(0.55 0.20 27);     /* rojo */
    --err-bg:  oklch(0.97 0.03 27);
    --ok:      oklch(0.52 0.13 155);    /* verde */
    --ok-bg:   oklch(0.96 0.03 155);

    /* Botón start tipo GOV.UK — verde específico */
    --btn-start:       oklch(0.48 0.15 155);
    --btn-start-hover: oklch(0.38 0.13 155);
    --btn-start-shadow: oklch(0.30 0.10 155);

    /* ─── Separadores ───────────────────────────────────────── */
    --line: oklch(0.13 0.003 250 / 0.18);
    --line-strong: oklch(0.13 0.003 250 / 0.35);

    /* ─── Borde signature: 4px izquierdo en avisos y citas ──── */
    --border-accent-w: 4px;
    --border-info:  var(--info);
    --border-warn:  var(--warn);
    --border-err:   var(--err);
    --border-ok:    var(--ok);

    /* ─── Forma: sin radio, sin sombra ─────────────────────── */
    --radius: 0;
    --shadow: none;
    --border: 1px solid var(--line);
    --border-strong: 1px solid var(--line-strong);

    /* ─── Fase BETA ─────────────────────────────────────────── */
    --phase-bg:   oklch(0.52 0.13 250);  /* azul GOV.UK */
    --phase-text: oklch(1 0 0);

    /* ─── Tipografía: Public Sans — amplia, 6+ pesos ─────────
       Familia única sans con rango de pesos amplio.
       Fallback humanista sin Inter. */
    --font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Source Code Pro", "Courier New", monospace;

    /* ─── Escala fluida (320px → 1280px) ────────────────────── */
    --step--1: clamp(0.78rem,  0.75rem + 0.16vw, 0.875rem);
    --step-0:  clamp(1rem,     0.96rem + 0.22vw, 1.125rem);   /* body */
    --step-1:  clamp(1.19rem,  1.10rem + 0.44vw, 1.5rem);
    --step-2:  clamp(1.44rem,  1.25rem + 0.95vw, 2rem);
    --step-3:  clamp(1.75rem,  1.40rem + 1.75vw, 2.75rem);
    --step-4:  clamp(2.25rem,  1.60rem + 3.25vw, 4rem);
    --step-5:  clamp(2.80rem,  1.75rem + 5.25vw, 5.5rem);   /* display grande */

    /* ─── Espaciado ─────────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ─── Medida de lectura ─────────────────────────────────── */
    --measure: 66ch;
    --narrow:  48ch;

    /* ─── Layout ────────────────────────────────────────────── */
    --page-max:  1200px;
    --page-pad:  clamp(1rem, 4vw, 2.5rem);
    --content-max: 840px;
    /* Margen izquierdo generoso en escritorio para metadata/labels */
    --gutter-left: clamp(0rem, 10vw, 8rem);
  }
}