/* ============================================================================
   tokens.css — Sistema de diseño de LA ESCUELA DE CANAL (LEC)
   Paleta derivada de la marca: Cabecera_Ejemplo.png + logos + iconos.
   Un único lugar para los colores/tipografía → re-theme sencillo.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --lec-crema:        #f7f1e8;   /* fondo principal */
  --lec-crema-rgb:    247, 241, 232;  /* mismo crema en componentes, para rgba() con alfa variable */
  --lec-crema-2:      #f1e7d8;   /* fondo alterno / tarjetas */
  --lec-melocoton:    #f3e0d2;   /* acentos suaves / hover / círculos icono */
  --lec-terracota:    #c0472a;   /* acento principal, iconos, CTA */
  --lec-terracota-2:  #a63c22;   /* terracota oscuro (hover CTA) */
  --lec-vino:         #7a1e22;   /* logo, titulares, texto fuerte */
  --lec-vino-rgb:     122, 30, 34;  /* el mismo vino para rgba() (velo del hero) */
  --lec-arena:        #f0d0a9;   /* melocotón de los iconos de la escuela; resalte sobre vino */
  --lec-vino-2:       #5e1519;   /* vino oscuro */
  --lec-tinta:        #3a2b28;   /* texto cuerpo (marrón muy oscuro) */
  --lec-tinta-suave:  #6f5f5a;   /* texto secundario */
  --lec-linea:        #e4d6c4;   /* bordes / separadores */
  --lec-blanco:       #fffdf9;

  /* --- Roles semánticos --- */
  --color-bg:         var(--lec-crema);
  --color-surface:    var(--lec-blanco);
  --color-text:       var(--lec-tinta);
  --color-text-soft:  var(--lec-tinta-suave);
  --color-heading:    var(--lec-vino);
  --color-accent:     var(--lec-terracota);
  --color-accent-ink: var(--lec-terracota-2);
  --color-border:     var(--lec-linea);

  /* --- Tipografía --- */
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Escala tipográfica fluida --- */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-3xl:  clamp(2rem, 1.5rem + 2.6vw, 3.4rem);

  /* --- Espaciado --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* --- Radios / sombras / layout --- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(58, 43, 40, 0.08);
  --shadow: 0 8px 24px rgba(122, 30, 34, 0.10);
  --shadow-lg: 0 16px 48px rgba(122, 30, 34, 0.14);
  --container: 1200px;
  --header-h: 130px;   /* alto del header sticky: marca + nav (la topbar no es sticky) */
  --transition: 0.25s ease;
}