/* tokens.css — Nonfoi Design System V5
   Fuente de verdad: docs/design-system/VISUAL-SYSTEM-V5.md
   Este fichero solo define tokens CSS. Sin selectores de componente.
*/

:root {
  /* ── Marca ──────────────────────────────────────────── */
  --nf-brand:       #10b44a;
  --nf-brand-deep:  #0a7a31;
  --nf-brand-soft:  #d8f5e2;
  --nf-brand-glow:  #6ce39a;

  /* ── Acentos cromáticos ─────────────────────────────── */
  --nf-cobalt:      #2c5cff;
  --nf-cobalt-soft: #e3eaff;
  --nf-cobalt-deep: #1A3580;   /* texto sobre --nf-cobalt-soft — WCAG 9.37:1 */
  --nf-amber:       #f5a524;
  --nf-amber-soft:  #fff1d6;
  --nf-amber-deep:  #6B3F00;   /* texto sobre --nf-amber-soft — WCAG 8.05:1 */
  --nf-coral:       #ff5d49;
  --nf-coral-soft:  #ffe1db;
  --nf-coral-deep:  #8B1E15;   /* texto sobre --nf-coral-soft — WCAG 7.43:1 */
  --nf-violet:      #7c5cff;
  --nf-violet-soft: #ece6ff;
  --nf-violet-deep: #4A2B7A;   /* texto sobre --nf-violet-soft — WCAG 9.04:1 */

  /* ── Superficies ────────────────────────────────────── */
  --nf-paper:        #f4f1ea;
  --nf-paper-2:      #ebe6db;
  --nf-canvas:       #fbf9f4;
  --nf-surface:      #ffffff;
  --nf-surface-soft: #f7f4ed;

  /* ── Tinta ──────────────────────────────────────────── */
  --nf-ink:    #14201c;
  --nf-ink-2:  #3a4744;
  --nf-ink-3:  #6c7975;
  --nf-ink-4:  #9aa49f;
  --nf-line:   #e7e2d6;
  --nf-line-2: #d6cfc0;

  /* ── Tipografía ─────────────────────────────────────── */
  /* Fase 1 (2026-05-07): retirado DM Sans / DM Mono del fallback. */
  --nf-display: 'Fraunces', Georgia, serif;
  --nf-sans:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --nf-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica — Generosa+ Fase 1 (2026-05-07) */
  --fs-hero-num:  4rem;        /* 64px (antes 56px) */
  --fs-hero-text: 2.375rem;    /* 38px (antes 32px) */
  --fs-page:      2.375rem;    /* 38px (antes 26px) */
  --fs-section:   1.375rem;    /* 22px (antes 17px) */
  --fs-body:      1rem;        /* 16px (antes 15px) */
  --fs-dense:     1rem;        /* 16px (antes 14px) */
  --fs-meta:      0.9375rem;   /* 15px (antes 13px) */
  --fs-label:     0.8125rem;   /* 13px (antes 12px) */
  --fs-micro:     0.75rem;     /* 12px (antes 11px) */

  /* Pesos tipográficos — Fase 4 (2026-05-24) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heights — escala canónica V5 Fase 4 (2026-05-24).
     5 niveles intencionales. Valores fuera de escala (1.3, 1.4, 1.6, etc.)
     quedan como literales locales por componente. */
  --lh-1:       1;       /* titulares hero numéricos sin descender */
  --lh-tight:   1.2;     /* subtítulos, headings ajustados */
  --lh-snug:    1.35;    /* texto denso, tablas */
  --lh-normal:  1.5;     /* cuerpo defecto */
  --lh-relaxed: 1.7;     /* long-form, párrafos largos */

  /* Letter-spacings — escala canónica V5 Fase 4 (2026-05-24).
     4 niveles intencionales. Valores fuera de escala (0.05em, 0.06em, etc.)
     quedan como literales locales por componente. */
  --ls-tight:  -0.02em;  /* titulares apretados, números hero */
  --ls-normal: 0;        /* defecto */
  --ls-wide:   0.04em;   /* kickers, headers tabla, badges uppercase */
  --ls-extra:  0.08em;   /* kickers ultra uppercase */

  /* ── Sombras ────────────────────────────────────────── */
  --nf-shadow-xs: 0 1px 0 rgba(20,32,28,.04), 0 1px 2px rgba(20,32,28,.04);
  --nf-shadow-sm: 0 2px 4px rgba(20,32,28,.05), 0 4px 12px rgba(20,32,28,.04);
  --nf-shadow-md: 0 6px 16px rgba(20,32,28,.08), 0 2px 4px rgba(20,32,28,.04);
  --nf-shadow-lg: 0 24px 48px -12px rgba(10,80,40,.18), 0 8px 16px rgba(20,32,28,.06);

  /* ── Radios ─────────────────────────────────────────── */
  --r-1:    6px;
  --r-2:    10px;
  --r-3:    14px;
  --r-4:    18px;
  --r-pill: 999px;

  /* ── Transitions — Fase 4 (2026-05-24) ampliación ─── */
  --duration-fast:   150ms;                          /* hover, focus, micro */
  --duration-normal: 200ms;                          /* cards, modal toggle */
  --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);   /* curva V5 canónica */

  /* ── Z-index — capas semánticas (V5 Fase 4.1, 2026-05-23) ───
     Escala canónica. Un componente NUNCA escribe z-index raw —
     usa siempre var(--z-X) según su rol semántico. */
  --z-base:           0;
  --z-raised:         1;
  --z-dropdown:      10;
  --z-sticky:       100;
  --z-modal-backdrop: 1000;
  --z-modal:        1001;
  --z-toast:        2000;
  --z-tooltip:      3000;

  /* ── Espaciado — sincronizado con nonfoi.css (D-SHELL-4) ─────
     Valores aplicados en runtime por cascada (nonfoi.css carga después).
     Esta declaración refleja la escala REAL del proyecto. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;   /* sync nonfoi.css — era 24px en tokens.css canónico */
  --sp-6:  24px;   /* sync nonfoi.css — era 32px */
  --sp-7:  48px;
  --sp-8:  32px;   /* sync nonfoi.css — era 64px */
  --sp-9:  96px;
  --sp-10: 40px;   /* añadido — nonfoi.css lo define y se usa */

  /* ── Anchos canónicos ───────────────────────────────── */
  --nf-content-narrow:  640px;
  --nf-content-default: 1100px;
  --nf-content-wide:    1640px;
}