/* ============================================================
   LALO CHOQUE — tokens.css (único archivo de variables)
   Paleta derivada del logo: verde petróleo + ocre + hoja.
   Estilo: light editorial corporativo, inmersión media.
   No edites base.css; lo específico del proyecto va en /css/lalo.css
   ============================================================ */
:root {
  /* --- Marca --- */
  --brand:          #0F4C4C;   /* verde petróleo del logo: eyebrows, nav activo, fondos de escena */
  --brand-deep:     #082F30;   /* hero, footer, bloques de color pleno */
  --brand-soft:     #E4ECEA;   /* fondo suave verde para chips/hover sobre crema */
  --accent:         #B8975A;   /* ocre del logo: ÚNICO acento de acción (CTA, franja, números) */
  --accent-ink:     #7A6031;   /* ocre oscurecido para texto pequeño sobre claro (AA) */
  --leaf:           #5BB84A;   /* hoja del logo: íconos, checks; nunca en botones */
  --wa:             #25D366;   /* solo WhatsApp */

  /* Alias que usa base.css del ui-kit */
  --primary:        var(--accent);
  --primary-ink:    #0B1F1F;
  --accent-2:       var(--brand);

  /* --- Fondos y superficies (claros) --- */
  --bg:             #F7F6F2;
  --bg-2:           #EFEDE6;
  --surface:        rgba(11,31,31,.035);
  --surface-2:      rgba(11,31,31,.07);
  --border:         rgba(11,31,31,.10);
  --border-strong:  rgba(11,31,31,.22);

  /* --- Texto --- */
  --text:           #0B1F1F;
  --text-2:         #3F4A48;
  --text-3:         #5F6B69;   /* 5.2:1 sobre --bg (AA) */

  --success: var(--leaf); --warning: #C99A2E; --danger: #B3261E;

  /* --- Gradientes y brillos --- */
  --grad-brand:  linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  --grad-cool:   linear-gradient(135deg, var(--brand) 0%, #1E6B66 100%);
  --grad-text:   linear-gradient(90deg, var(--text) 0%, #2C4A48 50%, var(--accent-ink) 100%);
  --glow:        0 0 0 1px rgba(184,151,90,.25), 0 14px 34px -14px rgba(184,151,90,.65);
  --glow-cool:   0 0 60px -12px rgba(15,76,76,.45);

  /* --- Tipografía --- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", monospace;

  --fs-hero:  clamp(2.5rem, 5.1vw, 4.5rem);
  --fs-h1:    clamp(2.2rem, 4.4vw, 3.6rem);
  --fs-h2:    clamp(1.9rem, 3.4vw, 2.8rem);
  --fs-h3:    clamp(1.2rem, 1.9vw, 1.45rem);
  --fs-lead:  clamp(1.05rem, 1.35vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .76rem;

  --lh-tight: 1.04; --lh-snug: 1.15; --lh-body: 1.65;
  --track-tight: -0.02em; --track-wide: .14em;

  /* --- Espaciado y forma --- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem;  --section: clamp(3.5rem, 7vw, 5.5rem);   /* compacto: cada escena cabe en 900 px */
  --container: 1200px; --container-wide: 1400px; --gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-s: 6px; --radius: 10px; --radius-l: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11,31,31,.08);
  --shadow-2: 0 10px 30px -12px rgba(11,31,31,.18);
  --shadow-3: 0 30px 70px -24px rgba(11,31,31,.28);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .18s; --dur: .35s; --dur-slow: .8s;
}