/**
 * tokens.css — Design tokens del rediseño 2026 (dirección C «Alivio»)
 *
 * Fuente de verdad de color, tipografía, forma, elevación, espaciado y movimiento.
 * Nace del mapa #70: dirección visual #77, logo #80, accesibilidad #73, galería #81.
 *
 * Reglas de sistema (decididas en #73, no negociables):
 *  - Todo par de texto listado aquí está verificado WCAG 2.2 AA (≥4.5:1).
 *    La verificación vive en la galería (index.html, sección «Pares verificados»).
 *  - Ninguna animación vive fuera de los tokens de movimiento: con
 *    prefers-reduced-motion los tokens colapsan a 0ms y todo el sistema se detiene.
 *  - Tema claro comprometido (decisión de #77): no hay variante oscura.
 *
 * El design system del rediseño convive con el legado (css/design-system.css)
 * hasta la migración por olas; por eso todos los tokens llevan prefijo --ds-.
 */

/* ============ Webfont autohospedada (variable, subset latin) ============ */
/* Nunito Sans — decidida en #81 (2026-07-16) sobre Karla, viendo la galería.
   Autohospedada: sin CDN, compatible con el precache PWA y el fingerprinting. */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('fonts/nunito-sans-latin-var.woff2') format('woff2');
}

:root {
    /* ============ Color · neutrales fríos-suaves ============ */
    --ds-color-bg: #F4F7F7;            /* fondo de página */
    --ds-color-surface: #FFFFFF;       /* tarjetas y riel */
    --ds-color-input-bg: #FBFDFD;      /* relleno de campos */
    --ds-color-ink: #1F3A3D;           /* texto principal · 12.13:1 sobre superficie */
    --ds-color-ink-soft: #3E5C60;      /* labels y texto secundario fuerte · 7.23:1 */
    --ds-color-muted: #5B7276;         /* texto de apoyo · 5.11:1 (nunca sobre chip) */
    --ds-color-label-group: #5C7675;   /* rótulos de grupo del riel · 4.88:1 */
    --ds-color-faint: #8AA0A0;         /* SOLO decorativo (2.76:1 — prohibido como texto) */
    --ds-color-border: #E4ECEB;        /* bordes de tarjeta */
    --ds-color-border-input: #D3E0DF;  /* bordes de campo en reposo */
    --ds-color-border-strong: #7E9693; /* límites que exigen 3:1 no-texto (checkbox, radio) */

    /* ============ Color · acento teal ============ */
    --ds-color-accent: #0F766E;        /* teal profundo · 5.47:1 sobre superficie */
    --ds-color-accent-hover: #0B5D57;  /* hover/active · 7.73:1 */
    --ds-color-accent-ink: #FFFFFF;    /* texto sobre teal · 5.47:1 */
    --ds-color-chip: #E6F2F0;          /* chips suaves; su texto es accent o ink-soft */

    /* ============ Color · estados ============ */
    --ds-color-danger: #A8271F;        /* 7.06:1 sobre superficie */
    --ds-color-danger-bg: #FBECEB;
    --ds-color-warning-ink: #7A4E00;   /* 6.54:1 sobre su banda */
    --ds-color-warning-bg: #FDF3E1;
    --ds-color-success: var(--ds-color-accent);   /* el éxito es teal, no un verde nuevo */
    --ds-color-success-bg: var(--ds-color-chip);

    /* ============ Tipografía ============ */
    --ds-font-sans: 'Nunito Sans', 'Avenir Next', 'Segoe UI', Seravek, system-ui, sans-serif;
    --ds-fw-regular: 400;
    --ds-fw-medium: 500;
    --ds-fw-semibold: 600;
    --ds-fw-bold: 700;
    --ds-fs-caption: 0.75rem;      /* 12 — chips, rótulos de grupo, fuente normativa */
    --ds-fs-small: 0.8125rem;      /* 13 — filas de datos, action bar, historial */
    --ds-fs-body: 0.875rem;        /* 14 — cuerpo, inputs */
    --ds-fs-lead: 0.9375rem;       /* 15 — subtítulos de página */
    --ds-fs-h3: 1.0625rem;         /* 17 — títulos de tarjeta */
    --ds-fs-h2: 1.25rem;           /* 20 — secciones */
    --ds-fs-h1: 1.4375rem;         /* 23 — título de página */
    --ds-fs-display: 1.6875rem;    /* 27 — el dato del resultado */
    --ds-lh-tight: 1.2;
    --ds-lh-normal: 1.55;

    /* ============ Forma ============ */
    --ds-radius-card: 16px;
    --ds-radius-input: 10px;
    --ds-radius-band: 10px;        /* bandas internas: fuente normativa, avisos */
    --ds-radius-pill: 999px;       /* botones, chips, ítem activo del riel */

    /* ============ Elevación (baja por diseño) ============ */
    --ds-shadow-card: 0 1px 3px rgba(15, 60, 58, 0.06);
    --ds-shadow-raised: 0 4px 12px rgba(15, 60, 58, 0.10);   /* popovers, menús */

    /* ============ Espaciado (escala de 4) ============ */
    --ds-sp-1: 4px;
    --ds-sp-2: 8px;
    --ds-sp-3: 12px;
    --ds-sp-4: 16px;
    --ds-sp-5: 20px;
    --ds-sp-6: 24px;
    --ds-sp-7: 32px;
    --ds-sp-8: 40px;

    /* ============ Movimiento ============ */
    /* Ley del sistema (#73): ninguna transition/animation usa valores propios;
       siempre estos tokens, para que reduced-motion apague todo de un golpe. */
    --ds-motion-fast: 120ms;
    --ds-motion-base: 180ms;
    --ds-motion-slow: 240ms;
    --ds-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ============ Foco ============ */
    --ds-focus-ring: 2px solid var(--ds-color-accent);
    --ds-focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-motion-fast: 0ms;
        --ds-motion-base: 0ms;
        --ds-motion-slow: 0ms;
    }
}

/* Foco visible universal: mismo anillo teal en todo el sistema. */
.ds :focus-visible,
.ds:focus-visible {
    outline: var(--ds-focus-ring);
    outline-offset: var(--ds-focus-offset);
    border-radius: 4px;
}