/* ==========================================================================
   White Moon Jewels — design tokens
   --------------------------------------------------------------------------
   Every value here was MEASURED off https://whitemoonjewels.com on 2026-07-30
   (computed custom properties, live element boxes, declared media queries) and
   is recorded in RESEARCH.md §1. Nothing is copied from the reference theme's
   stylesheets — these are the design decisions, re-expressed in our own system.

   Two conventions worth knowing before editing:

   1. Colours are authored as HEX here and mirrored as SPACE-SEPARATED RGB
      channel triples (`--wm-ink-rgb: 22 23 27`) so a component can do
      `rgb(var(--wm-ink-rgb) / .12)` for a tint without a second token. The
      reference needed a separate token for every opacity; this does not.

   2. The type scale is NOT uniformly reduced on mobile. Measured ratios are
      h1 50%, h2 60%, h3–h6 70%, body sizes 90%. A single scale factor gets h1
      and h2 visibly wrong, so each step carries its own mobile value.
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --wm-accent: #9c8559;              /* brand gold */
  --wm-accent-rgb: 156 133 89;
  --wm-ink: #16171b;                 /* primary text */
  --wm-ink-rgb: 22 23 27;
  --wm-ink-soft: #4c4e56;            /* secondary text */
  --wm-paper: #ffffff;               /* page background */
  --wm-bone: #f4f3f0;                /* warm surface */
  --wm-mist: #e9e8e3;                /* cool surface */
  --wm-night: #121317;               /* deep surface */
  --wm-night-2: #1b1d22;
  --wm-silver: #9a9ca3;
  --wm-hot: #ff3b6b;                 /* sale / urgency */

  /* Chrome (measured from the live site, NOT the declared token defaults):
       announce  → ink bg, bone text
       header    → translucent BONE, ink text, sticky
       footer    → bone, ink text
     The whole site sits on bone (#f4f3f0), not white — white is reserved for a
     few surfaces (newsletter, trust bar, cards, overlays). */
  --wm-announce-bg: #16171b;
  --wm-announce-fg: #f4f3f0;
  --wm-chrome-bg: rgb(244 243 240 / .9);   /* header — translucent bone */
  --wm-chrome-text: #16171b;               /* ink */
  --wm-chrome-text-muted: #4c4e56;
  --wm-chrome-line: rgb(22 23 27 / .12);
  --wm-footer-bg: #f4f3f0;                  /* footer — solid bone */
  --wm-mega-bg: #faf9f6;                    /* mega panel — warm cream */

  /* ---- semantic ------------------------------------------------------- */
  --wm-bg: var(--wm-bone);          /* page background is BONE, measured #f4f3f0 */
  --wm-bg-alt: #f8f2ea;             /* secondary background */
  --wm-text: var(--wm-ink);
  --wm-text-muted: var(--wm-ink-soft);
  --wm-heading: #1f1f1f;
  --wm-link: #956e38;
  --wm-price: #1f1f1f;
  --wm-price-sale: #702424;
  --wm-line: #e3e3e3;
  --wm-hair: rgb(var(--wm-ink-rgb) / .12);
  --wm-hair-soft: rgb(var(--wm-ink-rgb) / .07);
  --wm-success: #11703b;
  --wm-error: #ad3838;
  --wm-highlight: #4f7660;

  /* ---- type ----------------------------------------------------------- */
  --wm-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Headings measured as Cormorant GARAMOND (not plain Cormorant). The logo
     wordmark is Jost caps, letter-spaced — a sans mark, not the serif. */
  --wm-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --wm-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --wm-font-logo: "Jost", system-ui, -apple-system, sans-serif;

  --wm-weight-body: 300;
  --wm-weight-menu: 400;
  --wm-weight-heading: 400;

  /* Desktop steps */
  --wm-h1: 3.825rem;
  --wm-h2: 2.25rem;
  --wm-h3: 1.35rem;
  --wm-h4: 1.2375rem;
  --wm-h5: 1.125rem;
  --wm-h6: 1.0125rem;
  --wm-text-base: 0.875rem;
  --wm-text-lg: 1.25rem;
  --wm-text-md: 1rem;
  --wm-text-sm: 0.75rem;
  --wm-text-xs: 0.625rem;

  /* The italic serif emphasis inside a heading ("grown by light") runs 120%
     of its parent heading and switches family style, never weight. */
  --wm-heading-em-size: 120%;
  --wm-heading-em-style: italic;

  --wm-leading-tight: 1.08;
  --wm-leading-heading: 1.15;
  --wm-leading-body: 1.65;
  --wm-tracking-wide: .16em;         /* eyebrows / small caps labels */
  --wm-tracking-normal: 0;

  /* ---- layout --------------------------------------------------------- */
  --wm-maxw: 1400px;
  --wm-gutter: clamp(22px, 6vw, 88px);
  --wm-nav-h: 76px;
  --wm-header-h: 105px;              /* nav + announcement, measured */

  /* Scrollbar — measured on the reference (window.innerWidth minus
     documentElement.clientWidth = 5px, track #ececec, thumb #747474).
     RESEARCH.md §1 recorded --width-scrollbar: 0 from the declared token, but
     the value that actually renders is 5px; the measurement wins. */
  --wm-scrollbar-w: 5px;
  --wm-scrollbar-track: #ececec;
  --wm-scrollbar-thumb: #747474;

  /* An 8px-based rhythm. The reference has no spacing scale of its own —
     it spaces ad hoc — so this is ours, chosen to land on its measurements. */
  --wm-space-1: 4px;
  --wm-space-2: 8px;
  --wm-space-3: 12px;
  --wm-space-4: 16px;
  --wm-space-5: 24px;
  --wm-space-6: 32px;
  --wm-space-7: 48px;
  --wm-space-8: 64px;
  --wm-space-9: 96px;
  --wm-section-y: clamp(48px, 7vw, 96px);

  /* ---- shape ---------------------------------------------------------- */
  --wm-radius: 0;                    /* the reference is fully square */
  --wm-border: 1px;
  --wm-card-ratio: 100%;             /* square product media */
  --wm-card-pad: 20px;
  --wm-card-zoom: 1.1;
  --wm-media-zoom: 1.05;

  /* ---- motion --------------------------------------------------------- */
  --wm-ease: cubic-bezier(.23, 1, .32, 1);          /* the default everywhere */
  --wm-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --wm-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --wm-dur-fast: 200ms;
  --wm-dur-card: 400ms;
  --wm-dur-image: 500ms;
  --wm-dur-slide: 500ms;
  --wm-dur-drawer: 420ms;

  /* ---- elevation ------------------------------------------------------ */
  /* The reference is almost entirely flat; shadows appear only on overlays. */
  --wm-shadow-pop: 0 12px 40px rgb(var(--wm-ink-rgb) / .14);
  --wm-shadow-drawer: 0 0 60px rgb(var(--wm-ink-rgb) / .22);

  --wm-z-header: 60;
  --wm-z-mega: 70;
  --wm-z-drawer: 90;
  --wm-z-modal: 100;
}

/* Mobile type scale — per-step ratios, not one global factor. Applied at the
   same 768px line the reference uses for its body-copy switch. */
@media (max-width: 768px) {
  :root {
    --wm-h1: 1.9125rem;      /* 50% */
    --wm-h2: 1.35rem;        /* 60% */
    --wm-h3: 0.945rem;       /* 70% */
    --wm-h4: 0.86625rem;
    --wm-h5: 0.7875rem;
    --wm-h6: 0.70875rem;
    --wm-text-base: 0.7875rem;  /* 90% */
    --wm-text-lg: 1.125rem;
    --wm-text-md: 0.9rem;
    /* sm and xs deliberately do NOT shrink — they keep their desktop 12px/10px.
       The per-step ratios above exist because display type set for a 1400px
       canvas is overbearing on a phone, and that logic runs out at the bottom of
       the scale: these two steps are the uppercase wide-tracked micro-labels
       (eyebrows, "View all", card price kickers, "Ends Soon", the −50% ribbon),
       and the 90% step put them at 10.8px and 9px on mobile. 9px tracked-out
       uppercase is the hardest thing on the page to read, on the device held
       furthest from the eye. Measured before this: the gemstones eyebrow, both
       card price labels and the ribbon all rendered at 9px at 390px wide. */
    --wm-text-sm: 0.75rem;
    --wm-text-xs: 0.625rem;
    --wm-card-pad: 8px;
  }
}

/* Anyone who has asked their OS to reduce motion gets none of ours. Every
   transition in this theme routes through these duration tokens, so zeroing
   them here disables the lot without hunting down individual rules. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wm-dur-fast: 1ms;
    --wm-dur-card: 1ms;
    --wm-dur-image: 1ms;
    --wm-dur-slide: 1ms;
    --wm-dur-drawer: 1ms;
  }
}