/* ==========================================================================
   MEN OF FORM — Design Tokens
   Single source of truth for palette, typography, spacing, motion.
   Mirrored in theme.json so the block editor matches the front end.
   Quiet luxury: warm paper, near-neutral ink, restrained accents, sharp edges.
   ========================================================================== */

:root {
  /* --- Neutrals — warm paper, cool ink -------------------------------- */
  --c-ink:        #171717;  /* primary text — decisive near-black */
  --c-charcoal:   #242424;
  --c-graphite:   #4A4A4A;  /* body copy — neutral grey */
  --c-stone:      #6B6B6B;  /* muted / meta — darker, more authority */
  --c-mist:       #D6D0C7;  /* hairlines, borders */
  --c-bone:       #ECE7DD;  /* section backgrounds */
  --c-ivory:      #FFFFFF;  /* page background — crisp white; warmth lives in
                               the bone bands, placeholders and accents */
  --c-white:      #FFFFFF;

  /* --- Accents — earned, never sprinkled ------------------------------ */
  --c-bronze:     #8B755E;  /* primary accent — muted, less yellow */
  --c-bronze-dk:  #6E5B47;
  --c-olive:      #6D7565;  /* subtle secondary accent */
  --c-metal:      #3A3D40;  /* dark metallic — premium tier markers */

  /* --- Functional ----------------------------------------------------- */
  --c-success:    #4A5D4E;
  --c-alert:      #8C5A4A;  /* muted, never bright red */

  /* --- Typography ----------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   var(--font-body);

  /* Editorial scale — px-anchored to the brand spec */
  --fs-hero:      clamp(3.625rem, 5vw, 5.5rem); /* 58 → 88px — hero H1 */
  --fs-3xl:       3.25rem;     /* 52px — page H1 / hub titles */
  --fs-2xl:       2.625rem;    /* 42px — section headings */
  --fs-xl:        1.875rem;    /* 30px — card headings */
  --fs-lg:        1.5rem;      /* 24px — product names */
  --fs-score:     2.125rem;    /* 34px — card score */
  --fs-base:      1.125rem;    /* 18px — body */
  --fs-sm:        0.875rem;    /* 14px */
  --fs-xs:        0.75rem;     /* 12px — nav */
  --fs-2xs:       0.6875rem;   /* 11px — eyebrow */

  --lh-hero:      0.95;
  --lh-tight:     1.0;
  --lh-heading:   1.06;
  --lh-body:      1.75;

  --tracking-hero:    -0.04em;
  --tracking-h2:      -0.03em;
  --tracking-card:    -0.02em;
  --tracking-eyebrow:  0.18em;
  --tracking-nav:      0.12em;
  --tracking-label:    0.08em;
  --tracking-btn:      0.14em;

  /* --- Spacing scale (8px base) -------------------------------------- */
  --space-1:  0.5rem;    /*  8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2.5rem;    /* 40px */
  --space-5:  4rem;      /* 64px */
  --space-6:  6rem;      /* 96px */
  --space-7:  8rem;      /* 128px */
  --space-8:  8.75rem;   /* 140px — section rhythm, breathing room as status */

  /* --- Layout --------------------------------------------------------- */
  --content-max: 1440px;  /* grander, commanding canvas */
  --prose-max:   68ch;    /* premium editorial reading measure */
  --gutter:      var(--space-3);

  /* --- Borders & radius — luxury reads as sharp ---------------------- */
  --hairline:    1px solid var(--c-mist);
  --radius-sm:   0;
  --radius-md:   0;

  /* --- Motion — calm, slow, no flash --------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    200ms;
  --dur:         320ms;
  --dur-slow:    480ms;

  /* --- Z-index scale -------------------------------------------------- */
  --z-nav:       100;
  --z-overlay:   200;
}

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