/* ============================================================
   DESIGN TOKENS — El Rancho Auténtico
   ============================================================ */
:root {
  /* Brand palette */
  --color-charcoal:   #1A1714;
  --color-charcoal-2: #211e1a;
  --color-cream:      #F5EFE3;
  --color-cream-2:    #ede5d4;
  --color-red:        #B5302A;
  --color-red-dark:   #8f241f;
  --color-gold:       #C9A02E;
  --color-gold-light: #ddb94a;
  --color-white:      #FFFFFF;

  /* Text on dark backgrounds */
  --text-on-dark-heading: #F5EFE3;
  --text-on-dark-body:    rgba(245, 239, 227, 0.78);
  --text-on-dark-muted:   rgba(245, 239, 227, 0.50);

  /* Text on light backgrounds */
  --text-on-light-heading: #1A1714;
  --text-on-light-body:    #374151;
  --text-on-light-muted:   #6B7280;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (fluid clamp where useful) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 3vw, 1.875rem);
  --text-4xl:  clamp(2rem,    4vw, 2.5rem);
  --text-5xl:  clamp(2.5rem,  5vw, 3.25rem);
  --text-6xl:  clamp(3rem,    6vw, 4rem);
  --text-7xl:  clamp(3.5rem,  8vw, 5.5rem);

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* Spacing */
  --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;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Section vertical rhythm */
  --section-py: clamp(4rem, 8vw, 7rem);

  /* Layout */
  --container-max: 1200px;
  --container-px:  clamp(1.25rem, 5vw, 3rem);
  --header-h:      72px;
  --header-h-sm:   60px;

  /* Borders & radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --border-gold: 1px solid rgba(201, 160, 46, 0.25);
  --border-cream: 1px solid rgba(245, 239, 227, 0.12);

  /* Shadows */
  --shadow-sm:   0 1px 3px  rgba(0,0,0,0.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.55);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,160,46,0.15);

  /* Transitions */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  180ms;
  --dur-base:  340ms;
  --dur-slow:  580ms;

  /* Z-index ladder */
  --z-base:       1;
  --z-card:      10;
  --z-sticky:   100;
  --z-header:   200;
  --z-overlay:  300;
  --z-modal:    400;
}