/* ==========================================================================
   COZY HOME BY SHAM, TOKENS
   Deep architectural olive, warm limestone, soft ivory, champagne, muted
   bronze, warm wood, cream, soft charcoal. No other hues exist on this site.
   ========================================================================== */

:root {
  /* ------------------------------------------------------- OLIVE (anchor) */
  --olive-950: #14160F;
  --olive-900: #1C1E16;
  --olive-850: #23261C;
  --olive-800: #2C2F24;
  --olive-700: #414437;   /* primary */
  --olive-600: #535747;
  --olive-500: #6B6F5D;
  --olive-300: #9AA08C;

  /* ------------------------------------------------- STONE / IVORY / WOOD */
  --limestone:    #C4BCAC;
  --limestone-lt: #D5CEC1;
  --ivory:     #FBF9F4;
  --cream:     #F3EFE6;
  --cream-dp:  #E9E3D6;
  --champagne: #D9C9A9;   /* jewellery: small, intentional, rare */
  --bronze:    #7D5F3A;
  --wood:      #6B5138;
  --charcoal:  #2A2A24;

  /* ------------------------------------------------------------------ INK */
  --ink:       #1D1F18;
  --ink-soft:  #3A3D32;
  --ink-muted: #555848;
  --ink-faint: #626557;

  /* ------------------------------------------------------- ON DARK GROUND */
  --on-dark:      #F3EFE6;
  --on-dark-soft: rgba(243, 239, 230, .78);
  --on-dark-mute: rgba(243, 239, 230, .62);
  --rule-dark:    rgba(243, 239, 230, .18);
  --rule-dark-sf: rgba(243, 239, 230, .09);

  --rule:      rgba(29, 31, 24, .16);
  --rule-soft: rgba(29, 31, 24, .08);
  --rule-firm: rgba(29, 31, 24, .30);

  /* ------------------------------------------------------------ TYPEFACES */
  /* Display, the brand's primary face is "Fonde"; Cormorant Garamond is the
     closest available match to the logo lettering. Add the licensed webfont
     to the front of this stack if it is ever hosted.                        */
  --serif: 'Cormorant Garamond', 'Fonde', Didot, 'Times New Roman', serif;
  /* UI, Montserrat, as set out in the brand guidelines.                    */
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ----------------------------------------------------------- TYPE SCALE */
  --t-mega:    clamp(3rem, 11vw, 10.5rem);    /* viewport statements */
  /* Was clamp(2.6rem, 8.6vw, 9rem), which ran to 124px on a 1440 screen and
     took most of the opening view on its own. Brought down so the hero reads
     as one composition, the heading with the line, the facts and the buttons,
     rather than a wall of type you scroll past. Only .hero__h uses it. */
  --t-hero:    clamp(2.4rem, 6.2vw, 6rem);
  --t-display: clamp(2.3rem, 6.4vw, 5.6rem);
  --t-title:   clamp(1.9rem, 4.4vw, 3.8rem);
  --t-head:    clamp(1.4rem, 2.4vw, 2.1rem);
  --t-lede:    clamp(1.05rem, 1.25vw, 1.28rem);
  --t-body:    clamp(.95rem, 1vw, 1.03rem);
  --t-sm:      .8125rem;
  --t-xs:      .6875rem;

  --track-caps: .28em;    /* deliberate letter spacing on small caps */
  --track-mega: -.035em;  /* tight tracking at architectural scale */

  /* --------------------------------------------------------------- SPACING */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:2.5rem; --s8:3rem;   --s9:4rem;   --s10:5.5rem;
  --s11:7.5rem; --s12:10rem;

  --bay:    clamp(4rem, 8vw, 8.5rem);        /* vertical section rhythm */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  /* The viewport width WITHOUT the scrollbar. `100vw` includes it, so a full
     bleed element sized in vw overflows a desktop window by 15 or so pixels
     and puts a horizontal scrollbar on a page that has nothing to scroll to.
     app.js keeps this in step with clientWidth; the fallback covers the moment
     before that runs and any browser with JavaScript off. */
  --vw:     100vw;
  --maxw:   90rem;

  /* ----------------------------------------------------------------- SHAPE */
  /* A deliberate scale, not a blanket radius. Actions are pills, controls take
     a modest corner, contained media takes a larger one. Full-bleed imagery
     stays square. */
  --r-xs:   5px;    /* tags, the smallest chips              */
  --r-sm:   9px;    /* inputs and compact controls           */
  --r-md:   14px;   /* option rows, panels within panels     */
  --r-lg:   20px;   /* contained media, figures              */
  --r-xl:   28px;   /* the feature image, the dialog         */
  --r-pill: 999px;

  /* ---------------------------------------------------------------- DEPTH */
  /* Two layers each: a tight contact shadow plus a wide ambient one, so
     objects sit on the page instead of floating on a grey blur. */
  --sh-sm: 0 1px 2px rgba(20,22,15,.10), 0 4px 10px -6px rgba(20,22,15,.24);
  --sh-md: 0 1px 2px rgba(20,22,15,.13), 0 12px 28px -14px rgba(20,22,15,.42);
  --sh-lg: 0 2px 6px rgba(20,22,15,.14), 0 34px 70px -28px rgba(20,22,15,.55);
  --sh-press: 0 1px 1px rgba(20,22,15,.16), 0 3px 8px -5px rgba(20,22,15,.34);
  /* keeps a rounded image edge crisp against its ground */
  --edge:      inset 0 0 0 1px rgba(29,31,24,.07);
  --edge-dark: inset 0 0 0 1px rgba(243,239,230,.09);

  /* ---------------------------------------------------------------- MOTION */
  /* Weighted, calm, settling. Nothing bounces. */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.38,.005,.215,1);
  --d-fast: 240ms;
  --d:      520ms;
  --d-slow: 1100ms;

  /* above everything, including the quiz dialog: the page transition has to
     be able to cover whatever is open when a link is followed */
  --z-page: 1000;
  --z-curtain: 900;
  --z-menu: 800;
  --z-nav: 700;
  --z-float: 600;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d: 1ms; --d-slow: 1ms; }
}