/* ============================================================
   DESIGN TOKENS — v2 Premium
   ============================================================ */

:root {
  /* ── Raw palette ──────────────────────────────────────── */
  --white:       #FFFFFF;
  --cream:       #FAFAF7;
  --ivory:       #F3F0E8;
  --parchment:   #EAE5DA;

  --forest:      #182F23;
  --evergreen:   #244736;
  --sage:        #3A6247;
  --fern:        #688C78;
  --sage-pale:   #ECF2EE;
  --sage-ghost:  #F4F8F5;

  --ember:       #B36B46;
  --terracotta:  #C98A65;
  --blush:       #F5EDE4;

  --ink:         #0D1510;
  --charcoal:    #293530;
  --stone:       #4E5C56;
  --mist:        #7A8880;
  --silver:      #B2BDB8;
  --smoke:       #DDE5E0;
  --haze:        #EBF0EC;

  /* ── Semantic ──────────────────────────────────────────── */
  --color-bg-page:     var(--white);
  --color-bg-cream:    var(--cream);
  --color-bg-ivory:    var(--ivory);
  --color-bg-dark:     var(--forest);
  --color-bg-mid:      var(--evergreen);

  --color-primary:       var(--sage);
  --color-primary-mid:   var(--fern);
  --color-primary-light: var(--sage-ghost);
  --color-primary-pale:  var(--sage-pale);
  --color-primary-dark:  var(--forest);

  --color-accent:        var(--ember);
  --color-accent-warm:   var(--terracotta);
  --color-accent-light:  var(--blush);

  --color-text-main:   var(--ink);
  --color-text-body:   var(--charcoal);
  --color-text-muted:  var(--mist);
  --color-text-subtle: var(--silver);
  --color-text-inverse:var(--cream);

  --color-border:      var(--smoke);
  --color-border-sub:  var(--haze);

  /* ── Typography ────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(48px, 6.5vw, 84px);
  --fs-h1:      clamp(38px, 5vw, 64px);
  --fs-h2:      clamp(28px, 3.5vw, 48px);
  --fs-h3:      clamp(20px, 2vw, 26px);
  --fs-h4:      18px;
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-xs:      12px;
  --fs-xxs:     11px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-snug:    1.35;
  --lh-body:    1.72;

  --ls-label:  0.10em;
  --ls-wide:   0.14em;

  /* ── Spacing ────────────────────────────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-30:   120px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 80px);
  --header-h:      80px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --sh-xs: 0 1px 4px  rgba(13,21,16,.04);
  --sh-sm: 0 2px 14px rgba(13,21,16,.07);
  --sh-md: 0 6px 30px rgba(13,21,16,.10);
  --sh-lg: 0 16px 60px rgba(13,21,16,.13);
  --sh-xl: 0 30px 90px rgba(13,21,16,.16);

  /* ── Transitions ────────────────────────────────────────── */
  --t-fast: 140ms ease;
  --t-base: 280ms ease;
  --t-slow: 480ms cubic-bezier(.4,0,.2,1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-header:  300;
}