/*
 * Adornslo design tokens.
 *
 * Values measured off the Blomify reference at 1920px, not eyeballed:
 *   body        Nunito 14px/21px, #222 on #f0efea
 *   headings    Tenor Sans, uppercase, wide tracking, #602f28
 *   layout      full-bleed with ~15px edge gutters - NOT a fixed 1200px container
 */
:root {
  /* Colour */
  --bg: #f0efea;          /* warm bone page background */
  --brand: #602f28;       /* deep maroon - headings, ribbon, badges */
  --brand-dark: #4a231e;
  --brand-soft: #8a5a52;
  --ink: #222222;
  --ink-muted: #6b6b6b;
  --line: #dcd9d1;        /* hairline rules between list rows */
  --surface: #ffffff;
  --surface-alt: #e8e6df;
  --sale: #b23b2e;

  /* Type */
  --font-head: "Tenor Sans", "Times New Roman", serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;

  --fs-body: 14px;
  --lh-body: 21px;

  /* MEASURED: the reference uses letter-spacing: normal on almost everything -
     nav, headings, category rows, card titles, prices, badges. Wide tracking
     was the single biggest thing making our build look "not quite it".
     --tracking-wide survives only for the few genuinely tracked bits. */
  --tracking-head: normal;
  --tracking-wide: 0.14em;

  /* Type scale, measured off the reference at 1920px */
  /* Section headings are FLUID in the reference, not fixed: 39.36px at a 1920
     viewport and 32.14px at 1553 both compute to ~2.05vw. Hardcoding 39.36px
     made them too large on laptops and too small on wide screens. */
  --fs-h2: clamp(24px, 2.05vw, 44px);
  --fs-cat-row: 40px;      /* homepage category row names */
  --fs-card-title: 16px;
  --fs-nav: 15px;

  /* Layout - full-bleed. The reference measures 1905px of a 1920px viewport. */
  --gutter: 15px;
  --header-h: 80px;
  --announce-h: 52px;
  /* MEASURED: reference sections carry padding 0 and margin-bottom 100px, so the
     gap BETWEEN sections is 100px - not 120px of padding on each side (240px). */
  --section-gap: 100px;
  --section-pad: 120px;
  --radius: 0px;          /* Blomify is uniformly square-cornered */

  /* Motion
     MEASURED: the reference uses one transition everywhere - 0.4s ease-in-out.
     Not a custom cubic-bezier, and not 0.45s. Every interactive element on the
     page reported exactly this value.

     The reference DOES have a scroll reveal. An earlier note here said it did
     not, on the strength of 47 below-fold elements all sampling at full opacity
     with no transform. That reading was wrong, and the trap is worth keeping:
     the animation runs ONCE with animation-fill-mode: none and its pre-reveal
     class is stripped when it fires, so any element sampled after it has
     revealed looks exactly like an element that never animated.

     The real thing is fadeInUp, 1.25s, ease, on the top-level content
     sections - see the keyframes and mechanism in base.css. */
  --ease: ease-in-out;
  --dur: 0.4s;
}

/* Responsive steps -------------------------------------------------------
   MEASURED off the reference's own stylesheets, not invented. Its breakpoints
   are Bootstrap's: 1400 / 1199 / 991 / 767 / 575 / 480. This build was missing
   480 entirely and used 1399 instead of 1400.

   Section headings are viewport-relative at EVERY size, stepping the vw up as
   the screen narrows:
       desktop 2.05vw   1199: 3vw   767: 3.8vw   575: 4.8vw   480: 5.1vw
   A clamp with a fixed floor was giving 24px where the reference gives 36px on
   a tablet.

   Category row names step 40 -> 28 -> 24 -> 22 -> 18px.
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  :root { --section-gap: 90px; }
}

@media (max-width: 1199px) {
  :root {
    --fs-h2: 3vw;
    --fs-cat-row: 28px;
    --section-gap: 80px;
    --section-pad: 90px;
  }
}

@media (max-width: 991px) {
  :root {
    --fs-cat-row: 24px;
    --section-gap: 64px;
    --section-pad: 72px;
    /* MEASURED: 55px at a 390px viewport. */
    --header-h: 55px;
    --announce-h: 0px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h2: 3.8vw;
    --fs-cat-row: 22px;
    --section-gap: 56px;
  }
}

@media (max-width: 575px) {
  :root {
    --fs-h2: 4.8vw;
    --fs-cat-row: 18px;
    --fs-card-title: 14px;
    --section-gap: 48px;
    --section-pad: 56px;
    --gutter: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h2: 5.1vw;
    --section-gap: 40px;
  }
}

/* Respect a reader who has asked for less motion. The reference does not do
   this; it is a deliberate improvement, not a deviation to "fix". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}