/* =========================================================
   CUEE — Design Tokens
   css/tokens.css
   Paleta, tipografía, espaciado, layout y transiciones.
   ========================================================= */

:root {

  /* ── Colores de marca ─────────────────────────────────── */
  --color-primary:        #1f5d32;   /* Verde institucional */
  --color-primary-light:  #2e9732;   /* Verde claro */
  --color-accent-red:     #d2060f;   /* Rojo */
  --color-accent-orange:  #f5901b;   /* Naranja */
  --color-accent-blue:    #053f94;   /* Azul */

  /* ── Colores de texto ────────────────────────────────── */
  --color-text:           #1a1a1a;
  --color-text-muted:     #706f6f;
  --color-text-on-dark:   #ffffff;

  /* ── Colores de fondo ────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f8f9fa;
  --color-bg-dark:        #1a1a1a;   /* Footer */

  /* ── Separadores y bordes ────────────────────────────── */
  --color-border:         #e0e0e0;
  --color-border-subtle:  #ebebeb;

  /* ── Familias tipográficas ───────────────────────────── */
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Poppins', sans-serif;

  /* ── Escala tipográfica ──────────────────────────────── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-hero:  4rem;       /* 64px — Lora H1 */

  /* ── Pesos tipográficos ──────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Interlineado ────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-heading: 1.15;
  --leading-body:    1.7;

  /* ── Espaciado (base 4px) ────────────────────────────── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* ── Layout ──────────────────────────────────────────── */
  --container-max:     1200px;
  --container-pad:     var(--sp-6);   /* padding lateral */
  --section-py:        var(--sp-20);  /* padding vertical de sección estándar */
  --section-py-sm:     var(--sp-12);  /* secciones más compactas */

  /* ── Nav ─────────────────────────────────────────────── */
  --nav-height:   4rem;
  --nav-bg:       var(--color-primary);

  /* ── Transiciones ────────────────────────────────────── */
  --ease-fast:  150ms ease;
  --ease-base:  250ms ease;
}