/* ═══════════════════════════════════════════════════════════════
   Lafoy Media — Landing v3 — Design Tokens
   Heredado de dashboard/lib/ui/tokens-v2.css (sin prefijo --v2-).
   Norte: "Operator confidence meets editorial calm"
   Refs: Mercury Bank · Linear · Tremor · Refero/Granola
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutros ─────────────────────────────────────────── */
  --bg:             #FAFAFA;
  --bg-subtle:      #F4F4F5;
  --card:           #FFFFFF;
  --border:         #E4E4E7;
  --border-strong:  #D4D4D8;
  --text:           #18181B;
  --text-soft:      #52525B;
  --text-faint:     #71717A;       /* solo para texto ≥14px / 700 */
  --text-faint-aa:  #63636C;       /* AA-safe para texto pequeño sobre bg claro (4.5:1+) */
  --muted:          #A1A1AA;

  /* ── Acento Lafoy (4 niveles, reglas estrictas) ─────── */
  --accent:         #E8622A;       /* solo CTA primario + brand mark + KPI hero */
  --accent-hover:   #D14E1E;
  --accent-soft:    #F4A07D;       /* línea de chart, borde activo, punto destacado */
  --accent-tint:    rgba(232, 98, 42, 0.08);   /* chip activo, hover sutil */
  --accent-wash:    rgba(232, 98, 42, 0.04);   /* fondo card destacada */
  --accent-deep:    #B8431C;       /* texto sobre tint/wash */

  /* ── Estados semánticos (solo en mocks de UI) ───────── */
  --ok:             #16A34A;
  --ok-bg:          #F0FDF4;
  --warn:           #CA8A04;
  --warn-bg:        #FEFCE8;
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --info:           #2563EB;
  --info-bg:        #EFF6FF;

  /* ── Decision-semantics (decision cards) ────────────── */
  --scale:          #10B981;
  --scale-tint:     #ECFDF5;
  --pause:          #DC2626;
  --pause-tint:     #FEF2F2;
  --iterate:        #F59E0B;
  --iterate-tint:   #FFFBEB;
  --wait:           #6B7280;
  --wait-tint:      #F3F4F6;

  /* ── AI origin (source badges) ──────────────────────── */
  --ai-auto:        #FBBF24;       /* agente autónomo */
  --ai-audit:       #A78BFA;       /* gatillado por el operador */

  /* ── Spacing (4/8 base) ─────────────────────────────── */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ── Radius ─────────────────────────────────────────── */
  --radius-2xs: 4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;             /* cards */
  --radius-xl:  20px;
  --radius-pill: 9999px;           /* CTAs (Mercury/Linear) */

  /* ── Shadows (Mercury, siempre visibles) ────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);

  /* ── Tipografía ─────────────────────────────────────── */
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Fraunces', 'GT Sectra', 'Tiempos Headline', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Escala — calibrada a Linear/Mercury (H1 64/fw 600 lh 1.05 ls -0.025em) */
  --fs-eyebrow:  12px;             /* uppercase, fw 600, ls 0.06em — AA-safe */
  --fs-meta:     13px;
  --fs-body-sm:  14px;
  --fs-body:     16px;             /* landing default */
  --fs-body-lg:  18px;
  --fs-h3:       clamp(20px, 2.2vw, 28px);
  --fs-h2:       clamp(28px, 4vw, 48px);
  --fs-h1:       clamp(40px, 6vw, 64px);
  --fs-stat-lg:  clamp(40px, 6vw, 64px);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-base:     1.6;
  --lh-relaxed:  1.75;

  --ls-tighter:  -0.03em;
  --ls-tight:    -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.06em;           /* eyebrows */

  /* ── Layout ─────────────────────────────────────────── */
  --container:   1280px;           /* ≈ Uplane 610+gap+610 */
  --container-narrow: 720px;
  --nav-h:       64px;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
}

/* ── v2 page compatibility aliases (LIGHT / v3) ──────── */
/* datos.html, newsletter.html, metodo.html, sobre.html, blog, casos, etc.
   fueron escritas contra el sistema de tokens v2 (oscuro: --c-*).
   Estos aliases los remapean al sistema v3 CLARO equivalente para que
   rendericen con el mismo diseño claro que el homepage. Antes apuntaban
   a valores oscuros (#111, #1A1A1A, #FFF texto) → causaban secciones
   oscuras y texto sin contraste sobre el chrome claro de v3.
   Nota: esto es un puente. Lo ideal a futuro es reescribir cada página
   con tokens nativos v3 (--bg/--card/--text/--accent) y borrar este bloque. */
:root {
  /* Superficies: oscuro → claro */
  --c-bg:           var(--bg);            /* #FAFAFA — fondo de página */
  --c-base:         var(--bg);
  --c-surface:      var(--bg-subtle);     /* #F4F4F5 — sección sutil */
  --c-card:         var(--card);          /* #FFFFFF — tarjeta */
  --c-card-raised:  var(--card);

  /* Acento Lafoy: igual (naranja se mantiene en ambos temas) */
  --c-accent:       var(--accent);        /* #E8622A */
  --c-accent-dim:   var(--accent-tint);
  --c-accent-soft:  var(--accent-soft);
  --c-accent-deep:  var(--accent-deep);

  /* Texto: claro-sobre-oscuro → oscuro-sobre-claro */
  --c-light:        var(--text);          /* era #F5F5F5 (texto claro) → ahora #18181B */
  --c-white:        var(--text);          /* era #FFF (texto sobre oscuro) → ahora oscuro */
  --c-secondary:    var(--text-soft);     /* #52525B — texto secundario legible */

  /* Bordes */
  --c-border:       var(--border);        /* #E4E4E7 */
  --c-border-light: var(--border);

  /* Estados semánticos → equivalentes v3 (legibles sobre claro) */
  --c-success:      var(--ok);
  --c-warning:      var(--warn);
  --c-danger:       var(--danger);

  /* ── Tokens de layout/tipografía v2 ausentes en v3 ──── */
  /* Tamaños tema-agnósticos: se conservan los valores v2 para no romper
     el layout de las páginas migradas (v3 main.css no los referencia). */
  --font:        var(--font-sans);
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-md:     1.125rem;
  --text-lg:     1.25rem;
  --text-xl:     1.5rem;
  --text-2xl:    2rem;
  --text-3xl:    2.5rem;
  --text-4xl:    3rem;
  --text-5xl:    3.75rem;
  --text-display: clamp(2.75rem, 5.5vw, 4.25rem);
  --text-heading: clamp(1.75rem, 3vw, 2.5rem);
  --text-stat:   4.5rem;
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 5rem;
  --sp-3xl: 8rem;
  --max-w:     1200px;
  --content-w: 720px;
  --shadow-glow: 0 0 40px var(--accent-tint);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
}

/* ── Reduced motion (a11y) ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}