/* ============================================================
   VARIABLES GLOBALES – Tokens de diseño de Chocochucho
   Todos los colores, espaciados y tipografías se definen aquí.
   Nunca usar valores hardcoded en otros archivos CSS.
============================================================ */

:root {
  /* ── Paleta de marca ── */
  --color-cacao:       #023d1096;
  --color-chocolate:   #1f6b2ca7;
  --color-caramel:     #03310c;
  --color-caramel-lt:  #03310c;
  --color-cream:       #fdf6ed;
  --color-cream-dark:  #f5e9d4;
  --color-leaf:        #4a6741;
  --color-leaf-lt:     #6b9460;

  /* ── Texto ── */
  --color-text:        #1a0e06;
  --color-text-muted:  #7a5c48;
  --color-text-light:  rgba(255,255,255,0.75);
  --color-text-faint:  rgba(255,255,255,0.45);

  /* ── Bordes y superficies ── */
  --color-border:      rgba(61,28,2,0.12);
  --color-surface:     #ffffff;
  --color-overlay:     rgba(0,0,0,0.55);

  /* ── Tipografía ── */
  --font-display:      'Playfair Display', Georgia, serif;
  --font-body:         'DM Sans', system-ui, sans-serif;

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

  /* ── Bordes redondeados ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 4px rgba(61,28,2,0.08);
  --shadow-md:  0 4px 16px rgba(61,28,2,0.12);
  --shadow-lg:  0 8px 32px rgba(61,28,2,0.16);

  /* ── Transiciones ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Tamaños de fuente ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;

  /* ── Breakpoints (solo referencia, usar en JS) ── */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
}