/* =========================================================================
   MANGAL MUKHE — DESIGN TOKENS
   Cream-dominant heritage palette. Maroon is a contrast accent, never a
   background default. Approximate intended balance:
     warm ivory 70% · dark brown 12% · antique gold 8% · maroon 7% · green 3%
   Every value below is referenced by name — nothing is hard-coded downstream,
   which keeps the system portable into Elementor's global styles later.
   ========================================================================= */

:root {
  /* ---- Surfaces (dominant) ---- */
  --c-ivory:        #FCF8F0;
  --c-ivory-warm:   #F8F1E3;
  --c-cream:        #F3E9D7;
  --c-cream-deep:   #EADDC5;
  --c-sand:         #E2D2B4;

  /* ---- Grounding typography ---- */
  --c-ink:          #2B211A;
  --c-ink-soft:     #5B4B3D;
  --c-ink-mute:     #8A7A6A;

  /* ---- Antique gold (ornament, rules, small highlights) ---- */
  --c-gold:         #B98F3E;
  --c-gold-light:   #DCBE79;
  --c-gold-pale:    #EBD9AE;

  /* ---- Maroon (restrained: primary CTA, partner band, footer) ---- */
  --c-maroon:       #7C1420;
  --c-maroon-deep:  #5E0E18;
  --c-maroon-soft:  #93202D;
  --c-brand-red:    #B21E2B;

  /* ---- Muted heritage green (secondary accent) ---- */
  --c-green:        #4C6B3C;
  --c-green-deep:   #3A5330;

  /* ---- Functional ---- */
  --c-line:         rgba(43, 33, 26, 0.14);
  --c-line-soft:    rgba(43, 33, 26, 0.08);
  --c-line-gold:    rgba(185, 143, 62, 0.38);
  --c-on-dark:      #F7EFE1;
  --c-on-dark-mute: rgba(247, 239, 225, 0.72);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);
  --fs-h1:      clamp(2.1rem, 1.35rem + 2.9vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.24rem + 1.9vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.75vw, 1.65rem);
  --fs-lead:    clamp(1rem, 0.95rem + 0.28vw, 1.15rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.08;
  --lh-snug:    1.28;
  --lh-body:    1.72;

  --track-wide:  0.16em;
  --track-mega:  0.28em;

  /* ---- Spacing & rhythm ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y:  clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --gutter:     clamp(1.15rem, 0.55rem + 2.4vw, 3rem);
  --maxw:       1280px;
  --maxw-narrow: 780px;

  /* ---- Form & surface language ---- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 33, 26, 0.05), 0 2px 8px rgba(43, 33, 26, 0.04);
  --shadow:    0 2px 6px rgba(43, 33, 26, 0.06), 0 12px 32px rgba(43, 33, 26, 0.07);
  --shadow-lg: 0 8px 20px rgba(43, 33, 26, 0.10), 0 28px 64px rgba(43, 33, 26, 0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.28s;

  --header-h: 84px;

  /* ---- Hero art ratios ----
     The hero box locks to these, so object-fit:cover never crops the supplied
     artwork. Each value MUST match the exported pixel dimensions of the asset
     used at that breakpoint — change the ratio and the export together.
       wide      >= 1024px  landscape 1920 x 900
       portrait   < 1024px  portrait  2160 x 2700                            */
  --hero-ar-wide:     1920 / 900;
  --hero-ar-portrait: 2160 / 2700;

  /* Dwell and crossfade for the hero slider. */
  --hero-slide-dur: 600ms;
}

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
}