/* ==========================================================================
   SAATVIK HERBS — DESIGN TOKENS  (v2 · "Editorial Botanical")
   --------------------------------------------------------------------------
   The idea: a beautifully printed herbal journal. Enormous tight-set serif
   over full-bleed imagery, hairline rules, numbered chapters, and a paper
   ground that is warm rather than clinical. Colour does the quiet work;
   type and scale do the shouting.

   Palette is fixed by the brand and must not be extended casually. Every
   value below is either one of the six brand colours or a mechanical
   tint/shade of one, derived only where a surface or state needed it.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- COLOUR
     The six brand colours, named exactly as the brand sheet names them. */

  --alabaster:      #F9F6F0;  /* Unbleached Alabaster — main background      */
  --charcoal:       #1C261F;  /* Deep Forest Charcoal — primary text/borders */
  --olive:          #4A5E4D;  /* Heritage Olive Sage — brand anchor/headers  */
  --terracotta:     #985D44;  /* Roasted Terracotta — warmth accent          */
  --ochre:          #C89D66;  /* Muted Ochre Gold — quiet action accent      */
  --oat:            #EAE3D2;  /* Parchment Oat — card & section backgrounds  */

  /* Derived surfaces. Shades/tints only — no new hues. */
  --alabaster-lift: #FDFBF7;  /* raised card on alabaster                    */
  --oat-deep:       #DED5C0;  /* oat pressed a step darker (rules on oat)    */
  --charcoal-deep:  #141C16;  /* the very bottom of the page                 */
  --charcoal-lift:  #26332A;  /* raised surface inside a charcoal section    */
  --olive-deep:     #354437;  /* dark section ground that still reads green  */
  --olive-lift:     #5B7060;  /* hover state on olive                        */
  --terracotta-deep:#7C4B37;
  --ochre-soft:     #E0C79E;
  --ochre-deep:     #A87F4C;

  /* Alpha derivations — for rules, scrims and glass over unknown ground. */
  --line-dark:      rgba(28, 38, 31, 0.14);   /* hairline on light          */
  --line-dark-firm: rgba(28, 38, 31, 0.28);
  --line-light:     rgba(249, 246, 240, 0.16); /* hairline on dark          */
  --line-light-firm:rgba(249, 246, 240, 0.34);
  --scrim-charcoal: rgba(20, 28, 22, 0.55);    /* over imagery for contrast */
  --glass-light:    rgba(249, 246, 240, 0.72);
  --glass-dark:     rgba(20, 28, 22, 0.62);

  /* Semantic roles. Components reference THESE, not raw colours, so a
     section can flip light↔dark by redefining six variables (see .on-dark). */
  --bg:             var(--alabaster);
  --bg-raised:      var(--oat);
  --text:           var(--charcoal);
  --text-muted:     #676D66;
  --heading:        var(--olive);
  --accent:         var(--terracotta);
  --accent-quiet:   var(--ochre);
  --rule:           var(--line-dark);
  --rule-firm:      var(--line-dark-firm);

  /* ------------------------------------------------------------------ TYPE
     Two families, deliberately. Every extra webfont is a render-blocking
     request on a 3G phone, and this site is being rebuilt partly because of
     asset weight. Roles are carried by size, case and tracking instead.

     Instrument Serif — display only. Set enormous, tracking pulled tight,
     leading pulled under 1. It is a single weight by design; the drama comes
     from scale, not bolding. Its italic is the brand's emphasis gesture.

     Instrument Sans — everything else: body, labels, buttons, prices. */

  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans:    'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale — mobile-first values are the clamp minimums, so the phone
     layout is the one that was actually designed, not a squeezed desktop. */
  --fs-display: clamp(3.5rem, 13.5vw, 10.5rem);  /* hero only                */
  --fs-chapter: clamp(2.75rem, 9vw, 6.5rem);     /* section/product titles   */
  --fs-h2:      clamp(2rem, 5.5vw, 3.5rem);
  --fs-h3:      clamp(1.35rem, 2.6vw, 1.85rem);
  --fs-quote:   clamp(1.65rem, 4.4vw, 3rem);     /* pull quotes              */
  --fs-lede:    clamp(1.1rem, 1.9vw, 1.38rem);
  --fs-body:    1.09375rem;                       /* 17.5px — phone reading size */
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;                          /* uppercase tracked labels */
  --fs-micro:   0.6875rem;

  --lh-display: 0.86;
  --lh-tight:   1.04;
  --lh-snug:    1.28;
  --lh-body:    1.68;

  --tr-display: -0.03em;   /* tight display tracking */
  /* Negative tracking shrinks the word space along with the letter spaces, so
     at display size "Healing the way" starts reading as one long word. This
     puts roughly 20% back into the gap between words WITHOUT loosening the
     letters — the tight fit is the point, the collision isn't. Applied only
     to display type; body copy uses the face's own word space. */
  --ws-display:  0.055em;
  --tr-label:    0.16em;   /* wide label tracking    */
  /* Instrument Sans is a narrow grotesque; at reading sizes it sets tighter
     than the system faces most people are calibrated to, which reads as
     cramped rather than as tight. A hair of positive tracking on body copy
     buys back the difference without touching the display setting, which is
     meant to be tight. Set to 0 to return to the face's native fit. */
  --tr-body:     0.012em;

  /* --------------------------------------------------------------- SPACING
     A 4px-derived scale. --section is the vertical rhythm every band uses,
     so the page breathes consistently from phone to desktop. */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-sm:  1.125rem;
  --s-md:  1.75rem;
  --s-lg:  2.75rem;
  --s-xl:  4rem;
  --s-2xl: 6rem;
  --section: clamp(4.5rem, 10vw, 9rem);

  /* Page gutter. Deliberately tight on phones so full-bleed art has room. */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;          /* max line length for body copy */
  --content-max: 1320px;
  --nav-h: 4rem;
  /* Distance from a .wrap's content edge to the viewport edge. Lets any
     element inside a wrap bleed cleanly off one side without hardcoding a
     breakpoint: below --content-max it resolves to the gutter, above it the
     container's own outer margin is added in. */
  --bleed-side: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));

  /* ----------------------------------------------------------------- SHAPE */
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;
  /* Arch — the recurring silhouette for imagery. A printed-herbal/apothecary
     shape that a rectangle can't carry, and one line of CSS to apply. */
  --arch: 50% 50% 6px 6px / 34% 34% 6px 6px;

  /* ---------------------------------------------------------------- MOTION
     One easing curve for the whole site so everything moves as one body.
     Nothing is decorative-only: motion either reveals content, indicates
     depth, or acknowledges input. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 220ms;
  --t-med:  520ms;
  --t-slow: 900ms;

  /* ---------------------------------------------------------------- DEPTH */
  --shadow-sm: 0 1px 2px rgba(28,38,31,.05), 0 2px 8px rgba(28,38,31,.04);
  --shadow-md: 0 2px 6px rgba(28,38,31,.06), 0 12px 32px rgba(28,38,31,.08);
  --shadow-lg: 0 4px 12px rgba(28,38,31,.07), 0 28px 70px rgba(28,38,31,.14);

  --z-grain: 9000;
  --z-nav:   1000;
  --z-drawer:1100;
}

/* --------------------------------------------------------------------------
   .on-dark — the single mechanism for the site's light/dark section rhythm.
   Put it on any band and every component inside inverts correctly, because
   components only ever reference the semantic roles above.

   Note which accent survives the flip: ochre on charcoal clears 6.2:1, while
   terracotta on charcoal is only 3:1 — so --accent becomes ochre on dark.
   That is a contrast decision, not a stylistic one.
   -------------------------------------------------------------------------- */
.on-dark {
  --bg:           var(--charcoal);
  --bg-raised:    var(--charcoal-lift);
  --text:         var(--alabaster);
  --text-muted:   #A5A7A1;
  --heading:      var(--alabaster);
  --accent:       var(--ochre);
  --accent-quiet: var(--ochre);
  --rule:         var(--line-light);
  --rule-firm:    var(--line-light-firm);
  background: var(--bg);
  color: var(--text);
}

/* Olive variant of the dark band — used once, for the story section, so the
   page's darkest moment isn't always the same colour. */
.on-olive {
  --bg:           var(--olive-deep);
  --bg-raised:    var(--olive);
  --text:         var(--alabaster);
  --text-muted:   #B6BAB1;
  --heading:      var(--alabaster);
  --accent:       var(--ochre-soft);
  --accent-quiet: var(--ochre);
  --rule:         var(--line-light);
  --rule-firm:    var(--line-light-firm);
  background: var(--bg);
  color: var(--text);
}

/* Oat band — the quiet layer between two alabaster sections. */
.on-oat {
  --bg:        var(--oat);
  --bg-raised: var(--alabaster-lift);
  --rule:      rgba(28, 38, 31, 0.16);
  background: var(--bg);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   The site is authored on a fixed light/dark rhythm — dark bands are a
   compositional device, not a user preference — so OS dark mode is not
   mirrored. Colours stay as printed. This is intentional, not an omission.
   -------------------------------------------------------------------------- */