/* =========================================================
   Nile Savannah — Design Tokens
   Source of truth for color, type, spacing, motion.
   Sampled from Monica's mock comp 2026-04-27.
   ========================================================= */

:root {
  /* ---------- Color ---------- */
  /* Hero / dark */
  --c-hero-brown:        #3E342A;
  --c-hero-brown-deep:   #2E2620;
  --c-hero-brown-soft:   #4F4234;

  /* Light surfaces */
  --c-bone:              #F1E9DC;   /* page bg */
  --c-cream-card:        #EAE0CC;   /* product card / story panel */
  --c-cream-deep:        #DDD0B6;   /* nested card / hover */
  --c-off-white:         #F4EEE4;   /* type on dark, hero copy */

  /* Type */
  --c-carved-black:      #1A1A1A;   /* primary text on light, CTAs */
  --c-body:              #2A241D;   /* body text on cream */
  --c-muted:             #7A6B58;   /* eyebrow, secondary */
  --c-rule:              rgba(26,26,26,0.18);
  --c-rule-light:        rgba(244,238,228,0.20);

  /* Accents (use sparingly) */
  --c-clay:              #A88A6F;
  --c-nile:              #3B4A3A;
  --c-sunset:            #C2491C;

  /* ---------- Type ---------- */
  --f-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-sans:  "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-display-1: clamp(56px, 6vw, 88px);
  --fs-display-2: clamp(40px, 4.2vw, 64px);
  --fs-display-3: clamp(32px, 3vw, 44px);
  --fs-h1:        clamp(32px, 3vw, 44px);
  --fs-h2:        clamp(26px, 2.4vw, 36px);
  --fs-h3:        clamp(20px, 1.6vw, 26px);
  --fs-body:      15px;
  --fs-body-lg:   17px;
  --fs-small:     13px;
  --fs-caps:      11px;

  /* Letterspacing */
  --ls-caps:      0.22em;
  --ls-wordmark:  0.32em;
  --ls-display:   -0.005em;

  /* Line height */
  --lh-tight:     1.05;
  --lh-snug:      1.18;
  --lh-body:      1.65;

  /* ---------- Spacing ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Layout ---------- */
  --container:    1280px;
  --gutter:       40px;
  --gutter-mob:   20px;
  --header-h:     76px;
  --announce-h:   38px;

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:       180ms;
  --d-mid:        260ms;
  --d-slow:       420ms;

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 2px rgba(26,18,10,0.05);
  --shadow-md:  0 4px 16px rgba(26,18,10,0.08);
  --shadow-lg:  0 12px 40px rgba(26,18,10,0.16);
  --shadow-product: 0 30px 60px -20px rgba(26,18,10,0.35), 0 8px 20px -8px rgba(26,18,10,0.20);

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Z-index ---------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-drawer:  210;
  --z-modal:   220;
}