/* ==========================================================================
   GLOW — Design tokens
   Warm porcelain neutrals, ink typography and a single amber accent taken
   from apothecary glass. Compact spacing scale tuned for dense, premium
   commerce layouts (Prestige / Impact class themes).
   ========================================================================== */

:root {
  /* ---- Core palette --------------------------------------------------- */
  --c-ivory:        #F8F5F0;   /* page background */
  --c-porcelain:    #FDFBF8;   /* raised surfaces, drawers */
  --c-bone:         #F1EBE3;   /* alt section background */
  --c-sand:         #E7DDD0;   /* hover fills, dividers on bone */
  --c-line:         #E4DBD0;   /* hairlines */
  --c-line-strong:  #CFC3B5;   /* inputs, outlines */

  --c-ink:          #1F1B18;   /* headings, primary buttons */
  --c-ink-2:        #4B443E;   /* body copy */
  --c-ink-3:        #877C72;   /* muted / meta */
  --c-night:        #191512;   /* dark sections, footer */

  --c-amber:        #9C5A2B;   /* accent — links, highlights */
  --c-amber-deep:   #7B4420;   /* accent hover, promo bands */
  --c-amber-soft:   #F3E6D8;   /* accent tint, "new" badges */
  --c-sage:         #7D8A73;
  --c-sage-soft:    #E3E7DC;
  --c-rose:         #C38D7C;

  --c-success:      #3E6A4D;
  --c-danger:       #A23B2C;

  /* ---- Product stage tints (behind packshots) ------------------------- */
  --tint-sand:  #EADFD0;
  --tint-blush: #F1E0D7;
  --tint-sage:  #DFE4D7;
  --tint-bone:  #EEE7DD;
  --tint-mist:  #DDE4E7;
  --tint-clay:  #E8D2C2;

  /* ---- Semantic roles ------------------------------------------------- */
  --color-bg:          var(--c-ivory);
  --color-surface:     var(--c-bone);
  --color-raised:      var(--c-porcelain);
  --color-heading:     var(--c-ink);
  --color-text:        var(--c-ink-2);
  --color-muted:       var(--c-ink-3);
  --color-border:      var(--c-line);
  --color-accent:      var(--c-amber);
  --color-btn:         var(--c-ink);
  --color-btn-text:    var(--c-ivory);
  --color-btn-hover:   var(--c-amber-deep);
  --color-star:        var(--c-ink);
  --color-scrim:       rgba(25, 21, 18, .42);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-2xs:  10.5px;  /* badges */
  --fs-xs:   11.5px;  /* eyebrows, meta */
  --fs-sm:   13px;    /* UI, nav */
  --fs-base: 15px;    /* body */
  --fs-md:   17px;
  --fs-lg:   21px;
  --fs-xl:   clamp(24px, 2.2vw, 30px);
  --fs-2xl:  clamp(30px, 3.2vw, 44px);   /* section titles */
  --fs-3xl:  clamp(36px, 4.2vw, 58px);
  --fs-hero: clamp(44px, 6.2vw, 88px);

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-caps: .14em;
  --tracking-wide: .06em;

  /* ---- Spacing (4px base, compact) ------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 56px;  --sp-10: 72px;

  --container: 1360px;
  --gutter:    clamp(16px, 3.2vw, 40px);
  --section-y: clamp(44px, 5.4vw, 76px);
  --grid-gap:  clamp(12px, 1.4vw, 20px);

  --announce-h: 36px;
  --header-h:   68px;

  /* ---- Shape ---------------------------------------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  --btn-h:    46px;
  --btn-h-sm: 36px;
  --input-h:  46px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(31, 27, 24, .06);
  --shadow-sm: 0 4px 14px -6px rgba(31, 27, 24, .14);
  --shadow-md: 0 14px 34px -14px rgba(31, 27, 24, .24);
  --shadow-lg: 0 30px 70px -24px rgba(31, 27, 24, .34);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 520ms;

  /* ---- Layers --------------------------------------------------------- */
  --z-header: 50;
  --z-scrim:  80;
  --z-drawer: 90;
  --z-toast:  100;
}

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