/* ==========================================================================
   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 ---------------------------------------------------------- */
  /* Palette is the "Gallery Ivory" design handoff, not the measured live site.
     Named exactly as the brand guide names them, so a token can be checked
     against the spec without a translation table. */
  --wm-accent: #a8875a;              /* Champagne — accent ONLY: eyebrows,
                                        prices, stars, fine rules. Never a
                                        large fill and never a gradient. */
  --wm-accent-rgb: 168 135 90;
  --wm-ink: #16161a;                 /* Ink Noir — text, dark grounds, primary buttons */
  --wm-ink-rgb: 22 22 26;
  --wm-ink-soft: #6e6a63;            /* secondary text on light */
  --wm-paper: #ffffff;               /* White — product tiles, review cards */
  --wm-bone: #f7f4ee;                /* Moon Ivory — the page canvas */
  --wm-mist: #ddd8ce;                /* Mist — every 1px hairline and border */
  --wm-night: #1b1f2a;               /* Midnight — story / philosophy grounds */
  --wm-night-2: #16161a;
  --wm-silver: #b9b6ae;              /* secondary text on dark */
  --wm-silver-2: #9fa3ae;            /* stat sub-labels on dark */
  --wm-body: #43403a;                /* body copy */
  --wm-hair-dark: #2a2a30;           /* hairlines on dark grounds */
  --wm-hot: #ff3b6b;                 /* sale / urgency */

  /* Chrome, per the handoff:
       announce  → Ink ground, Ivory text
       header    → Ivory, ink text, 1px Mist rule beneath, sticky
       footer    → INK ground with Champagne column headers (the design
                   inverts the footer; the old measured theme had it light)
     The whole site sits on Moon Ivory. White is reserved for product image
     tiles and review cards. */
  --wm-announce-bg: #16161a;
  --wm-announce-fg: #f7f4ee;
  --wm-chrome-bg: rgb(247 244 238 / .92);  /* header — translucent ivory */
  --wm-chrome-text: #16161a;
  --wm-chrome-text-muted: #6e6a63;
  --wm-chrome-line: #ddd8ce;               /* Mist, a real hairline not a tint */
  --wm-footer-bg: #16161a;                 /* footer — Ink */
  --wm-footer-fg: #b9b6ae;
  --wm-footer-head: #a8875a;               /* Champagne column headers */
  --wm-mega-bg: #faf8f4;                   /* mega panel — a shade above ivory */

  /* ---- semantic ------------------------------------------------------- */
  --wm-bg: var(--wm-bone);          /* page canvas is Moon Ivory */
  --wm-bg-alt: var(--wm-paper);     /* white — product tiles, review cards */
  --wm-text: var(--wm-ink);
  --wm-text-muted: var(--wm-ink-soft);
  --wm-heading: var(--wm-ink);
  --wm-link: var(--wm-accent);      /* links warm to Champagne on hover */
  --wm-price: var(--wm-accent);     /* the handoff prices in Champagne, not ink */
  --wm-price-sale: #702424;
  --wm-line: var(--wm-mist);
  --wm-hair: var(--wm-mist);        /* Mist is the hairline — a flat 1px, not a tint */
  --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 — handoff: H1 58–76px, H2 36–46px, card names 21–23px.
     H1 is the hero (76px); H2 the section headings (44px). */
  --wm-h1: 4.75rem;        /* 76px */
  --wm-h2: 2.75rem;        /* 44px */
  --wm-h3: 1.625rem;       /* 26px — category tile names */
  --wm-h4: 1.375rem;       /* 22px — product card names */
  --wm-h5: 1.125rem;
  --wm-h6: 1rem;
  --wm-text-base: 0.9375rem;  /* 15px body */
  --wm-text-lg: 1.25rem;
  --wm-text-md: 1rem;
  --wm-text-sm: 0.75rem;      /* 12px labels */
  --wm-text-xs: 0.6875rem;    /* 11px eyebrows */

  /* 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.8;            /* handoff body: 1.7–1.8 */
  /* The handoff tracks labels far wider than the measured site did, and the
     amount varies by role — a nav item is .24em, a button .28em, a hero
     eyebrow .4em. One "wide" token flattened all three, so they are separate. */
  --wm-tracking-wide: .18em;         /* footer / small labels */
  --wm-tracking-nav: .24em;          /* nav + utility links */
  --wm-tracking-button: .28em;       /* buttons, tertiary links */
  --wm-tracking-eyebrow: .32em;      /* section eyebrows */
  --wm-tracking-hero: .4em;          /* hero eyebrow, philosophy eyebrow */
  --wm-tracking-normal: 0;

  /* ---- layout --------------------------------------------------------- */
  --wm-maxw: 1440px;                 /* handoff desktop canvas */
  --wm-gutter: clamp(20px, 5vw, 64px);  /* 64px gutters at full width */
  --wm-grid-gap: 28px;               /* handoff grid gap */
  --wm-nav-h: 76px;
  --wm-header-h: 105px;              /* nav + announcement, measured */

  /* 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: 2.375rem;       /* 38px — handoff mobile hero */
    --wm-h2: 1.875rem;       /* 30px */
    --wm-h3: 1.1875rem;      /* 19px — mobile category tile */
    --wm-h4: 1.125rem;
    --wm-h5: 1rem;
    --wm-h6: 0.9375rem;
    --wm-text-base: 0.875rem;
    --wm-text-lg: 1.125rem;
    --wm-text-md: 0.9rem;
    --wm-text-sm: 0.6875rem;
    --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;
  }
}