/* ============================================================
   variables.css — Tokens de diseño de Café León
   Todos los colores, fuentes y tamaños se definen aquí.
   Si necesitas cambiar algo visual, empieza en este archivo.
   ============================================================ */

:root {

  /* ── Paleta de marca ────────────────────────────────────── */
  --color-red:        #BF0F1E;   /* Rojo León — color primario (logo)        */
  --color-crimson:    #810516;   /* Carmesí — rojo profundo, fondos y hover  */
  --color-rust:       #8a1c02;   /* Óxido — acento cálido / tostado          */
  --color-charcoal:   #262223;   /* Carbón — fondo oscuro principal          */
  --color-ink:        #171415;   /* Tinta — el tono más oscuro (footer)      */
  --color-snow:       #F2F2F2;   /* Nieve — fondo claro de secciones         */
  --color-white:      #ffffff;
  --color-amber:      #D99A3D;   /* Ámbar — acento puntual (cereza madura)   */
  --color-cream:      #EFE6DC;   /* Crema — texto sobre fondos oscuros       */
  --color-muted:      #9a9092;   /* Texto apagado sobre fondos oscuros       */
  --color-muted-dark: #6b6466;   /* Texto apagado sobre fondos claros        */

  /* Líneas y superficies translúcidas */
  --line-dark:   rgba(242, 242, 242, 0.12);   /* Bordes sobre fondo oscuro */
  --line-light:  rgba(38, 34, 35, 0.12);      /* Bordes sobre fondo claro  */
  --red-soft:    rgba(191, 15, 30, 0.12);     /* Fondo rojo muy suave      */

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;

  /* ── Tamaños de fuente ──────────────────────────────────── */
  --text-xs:   0.62rem;
  --text-sm:   0.78rem;
  --text-base: 0.90rem;
  --text-md:   1.05rem;
  --text-lg:   1.25rem;
  --text-xl:   1.60rem;
  --text-2xl:  2.20rem;
  --text-3xl:  3.20rem;
  --text-hero: clamp(2.8rem, 5.5vw, 5.2rem);

  /* ── Espaciado ──────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  60px;
  --space-3xl:  80px;
  --space-4xl:  100px;

  /* ── Bordes y radios ────────────────────────────────────── */
  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-full: 100px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm:  0 4px 18px rgba(23, 20, 21, 0.10);
  --shadow-md:  0 8px 32px rgba(23, 20, 21, 0.16);
  --shadow-lg:  0 20px 60px rgba(23, 20, 21, 0.25);

  /* ── Transiciones ───────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   0.20s var(--ease-smooth);
  --transition-base:   0.30s var(--ease-smooth);
  --transition-slow:   0.60s var(--ease-smooth);

  /* ── Layout ─────────────────────────────────────────────── */
  --nav-height:    80px;
  --section-pad-x: var(--space-3xl);
  --section-pad-y: var(--space-4xl);
  --max-width:     1400px;

  /* ── Alias heredados ────────────────────────────────────
     mezcla.css y pago.php (pospuestos para una versión futura)
     usan los nombres de la paleta anterior. Se mapean a la
     paleta nueva para que sigan funcionando.
     ────────────────────────────────────────────────────── */
  --color-bark:      var(--color-charcoal);
  --color-soil:      var(--color-crimson);
  --color-wood:      var(--color-rust);
  --color-moss:      var(--color-crimson);
  --color-gold:      var(--color-red);
  --color-wheat:     var(--color-cream);
  --color-parchment: var(--color-snow);
  --color-linen:     var(--color-snow);
  --color-green-dim: var(--color-crimson);
}

/* ── Breakpoints de referencia (usar en media queries) ───────
   Mobile:  < 640px
   Tablet:  640px – 1024px
   Desktop: > 1024px
   ────────────────────────────────────────────────────────── */