/* ==========================================================================
   Dumbo Growth Lab — Design Tokens
   Única fuente de verdad para color, tipografía, espaciado y ritmo.
   Al portar a Elementor: replicar como "Global Colors" y "Global Fonts".
   ========================================================================== */

:root {
  /* --- Paleta oficial (Mini Guía de Identidad Visual) --------------------- */
  --ink:    #121211; /* fondo / texto oscuro   */
  --paper:  #FFFFFF; /* fondo / texto claro    */
  --sage:   #78826C; /* principal              */
  --green:  #98B572; /* secundario             */
  --accent: #2D5BFF; /* acento ESTRATÉGICO — uso mínimo y puntual */
  --mist:   #C7C7C5; /* fondo / líneas neutras */

  /* Derivados (no son colores nuevos, son mezclas de los oficiales) */
  --ink-92:  #12121114; /* velos sobre papel  */
  --ink-70:  rgba(18, 18, 17, .70);
  --ink-55:  rgba(18, 18, 17, .55);
  --paper-70: rgba(255, 255, 255, .70);
  --paper-55: rgba(255, 255, 255, .55);
  --paper-14: rgba(255, 255, 255, .14);
  --sage-16: rgba(120, 130, 108, .16);
  --sage-30: rgba(120, 130, 108, .30);
  --green-16: rgba(152, 181, 114, .16);
  --green-30: rgba(152, 181, 114, .30);
  --accent-16: rgba(45, 91, 255, .12);

  /* --- Roles semánticos: tema CLARO (por defecto) ------------------------- */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --muted:     var(--ink-55);
  --rule:      var(--mist);
  --field-bg:  var(--paper);
  --field-bd:  #d7d7d4;
  --surface:   #f5f5f3;   /* bloques neutros sobre papel */

  /* --- Tipografía ------------------------------------------------------------
     PRINCIPAL: Axiforma (títulos / UI)  ·  SECUNDARIA: Editorial New (editorial)
     Fallbacks del sistema hasta que se suban los archivos (assets/fonts/).   */
  --font-display: "Axiforma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Editorial New", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;

  /* Escala fluida (min → max entre 360px y 1280px de viewport)
     Iteración 2: escala moderada — composición más editorial, menos "gigante". */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.40rem);
  --step-2:  clamp(1.38rem, 1.22rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.60rem, 1.35rem + 1.15vw, 2.35rem);
  --step-4:  clamp(1.90rem, 1.50rem + 1.90vw, 3.15rem);
  --step-5:  clamp(2.20rem, 1.55rem + 3.10vw, 4.10rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-text:  1.62;

  --tracking-label: .18em;   /* kickers / etiquetas en mayúsculas */
  --tracking-tight: -0.02em; /* titulares grandes */

  /* --- Espaciado (escala modular ~1.5) ----------------------------------- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;
  --space-8: 7rem;
  --space-9: 9.5rem;

  /* Ritmo vertical de sección (espacio negativo intencional, editorial) */
  --section-y: clamp(3.25rem, 2.5rem + 4vw, 6.5rem);

  /* --- Layout ----------------------------------------------------------------- */
  /* Ancho contenido: se deja un margen lateral claro e IGUAL a cada lado;
     el texto no se pega al borde y el gráfico del hero no queda aislado. */
  --container-max: min(1720px, 88vw);  /* ~6vw de margen a cada lado (igual en ambos); el tope de 1720 solo entra en monitores muy anchos */
  --container-narrow: 780px;
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.25rem);

  /* --- Detalle / precisión --------------------------------------------------- */
  --radius: 3px;
  --radius-lg: 6px;
  --radius-btn: 999px;  /* píldora: completamente redondeado a los lados */
  --rule-w: 1px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-flow: cubic-bezier(0.65, 0, 0.35, 1); /* entrada y salida suaves — para la luz que recorre el hero */
  --dur: 420ms;
  --dur-fast: 220ms;

  --header-h: 72px;
}

/* --- Roles semánticos: tema OSCURO (secciones sobre #121211) -------------- */
[data-theme="dark"] {
  --bg:       var(--ink);
  --fg:       var(--paper);
  --muted:    var(--paper-55);
  --rule:     var(--paper-14);
  --field-bg: #1b1b19;
  --field-bd: rgba(255, 255, 255, .18);
  --surface:  #1b1b19;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}