/* ============================================================================
   EXECUTIVE LAB · DESIGN TOKENS
   Única fuente de verdad. Todas las páginas tiran de aquí.
   Marca (intocable): Colores.pdf + fuentes .ttf de /raw brand.
   Variaciones SOLO por opacidad de los colores de marca — no se inventan hues.
   ============================================================================ */

:root {
  /* ---- Colores de marca (exactos) ---- */
  --c-red:       #ec4429;   /* acento */
  --c-charcoal:  #404040;   /* texto / gris de marca */
  --c-cream:     #e9e1d9;   /* hueso cálido */
  --c-black:     #000000;
  --c-white:     #ffffff;
  --c-ink:       #0b0b0b;   /* negro de marca calibrado para pantalla (superficies oscuras) */

  /* ---- Acento (rojo) en estados/derivados, solo opacidad ---- */
  --red:         var(--c-red);
  --red-press:   #d23a20;                       /* rojo de marca, levemente hundido para :active/hover */
  --red-tint:    rgba(236, 68, 41, 0.08);
  --red-line:    rgba(236, 68, 41, 0.30);
  --red-glow:    rgba(236, 68, 41, 0.28);

  /* ---- Tema CLARO (secciones por defecto) ---- */
  --bg:          var(--c-white);
  --bg-warm:     var(--c-cream);                /* sección cálida alterna */
  --text:        var(--c-charcoal);
  --text-strong: #161310;                       /* casi negro para titulares de alto contraste */
  --text-dim:    rgba(64, 64, 64, 0.62);
  --line:        rgba(64, 64, 64, 0.12);
  --line-strong: rgba(64, 64, 64, 0.20);
  --surface:     var(--c-white);
  --surface-2:   rgba(64, 64, 64, 0.03);

  /* ---- Tema OSCURO (secciones de contraste) ---- */
  --d-bg:        var(--c-ink);
  --d-text:      rgba(233, 225, 217, 0.82);     /* cuerpo en crema, no blanco puro */
  --d-text-strong: var(--c-white);
  --d-text-dim:  rgba(233, 225, 217, 0.52);
  --d-line:      rgba(233, 225, 217, 0.14);
  --d-surface:   rgba(233, 225, 217, 0.04);

  /* ---- Tipografía ---- */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* escala (pocos tamaños, mucho contraste) */
  --fs-display:  clamp(42px, 8vw, 84px);
  --fs-h1:       clamp(34px, 6vw, 60px);
  --fs-h2:       clamp(27px, 4.4vw, 42px);
  --fs-h3:       clamp(20px, 2.2vw, 23px);
  --fs-lead:     clamp(17px, 1.7vw, 21px);
  --fs-body:     clamp(15.5px, 1.1vw, 17px);
  --fs-small:    14px;
  --fs-eyebrow:  12px;

  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-body:     1.62;
  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.02em;

  /* ---- Espaciado (base 8 · generoso) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --section-y: clamp(72px, 11vw, 152px);
  --gutter:    clamp(20px, 5vw, 40px);

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 760px;
  --container-wide:   1320px;

  /* ---- Radios ---- */
  --r-sm:   8px;
  --r:      14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* ---- Sombras (sutiles, nivel agencia) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:    0 14px 40px -18px rgba(22, 19, 16, 0.22);
  --shadow-lg: 0 40px 90px -36px rgba(22, 19, 16, 0.34);

  /* ---- Movimiento ---- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.2s;
  --dur-slow:  0.5s;
}