/* ==========================================================================
   Marie Beauty Hub — design tokens
   Extracted from the approved homepage (marie-beauty-hub.html).
   Change brand values here; components reference these variables only.
   ========================================================================== */

:root {
  /* Brand palette (approved) */
  --berry: #60112b;          /* primary: buttons, wordmark, eyebrows, links */
  --berry-hover: #7e2541;    /* button hover (from approved CSS) */
  --berry-deep: #4a0c20;     /* pressed state */
  --cream: #faf7f0;          /* page background */
  --ink: #341d21;            /* body text */
  --blush: #efd3c7;          /* hero + page-header bands */
  --blush-deep: #dfb4a4;     /* service photo panel */
  --sage: #d9dcc6;           /* botanical copy panels */
  --line: #ddcfc4;           /* hairline rules and borders */
  --muted: #675b55;          /* secondary text — 6.1:1 on cream */

  /* Supporting neutrals used by the approved components */
  --tile: #f3e7de;           /* category tiles */
  --stage: #f4f0e8;          /* product image stage */
  --card: #fffdf9;           /* product card surface */
  --card-line: #eee5dc;      /* product card border */
  --sand: #f5ede2;           /* service copy panel, info notes */
  --clay: #e8d4bf;           /* feature photo panel */
  --white: #ffffff;

  /* Feedback */
  --focus: #967334;          /* approved focus ring (gold) */
  --success: #3f5b3b;
  --success-bg: #e8ebdc;
  --error: #9b1c2c;
  --error-bg: #f9e6e3;
  --dev: #8a6a1f;            /* development "to confirm" markers */
  --dev-bg: #fbf3dc;

  /* Typography — system stacks, as approved (no web-font download) */
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
  --fs-body: 15px;
  --lh-body: 1.6;
  --fs-h1: clamp(42px, 4.9vw, 73px);
  --fs-h2: clamp(29px, 3.1vw, 46px);
  --fs-h2-feature: clamp(40px, 4.1vw, 60px);
  --fs-page-title: clamp(38px, 4.2vw, 60px);
  --fs-h3: 21px;
  --fs-lead: 18px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-eyebrow: 11px;
  --track-eyebrow: .25em;
  --track-h1: -.045em;

  /* Layout */
  --wrap: 1360px;
  --wrap-narrow: 760px;
  --gutter: 40px;
  --section: 55px;           /* vertical rhythm between sections */
  --header-h: 150px;

  /* Shape */
  --radius: 2px;             /* buttons, inputs */
  --radius-card: 3px;
  --radius-pill: 30px;       /* search field, filter chips */

  /* Motion — short and gentle */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .45s;

  --shadow-soft: 0 3px 20px rgba(52, 29, 33, .08);
  --shadow-lift: 0 14px 34px -18px rgba(52, 29, 33, .35);
  --shadow-drawer: -16px 0 48px rgba(33, 19, 22, .2);
  --backdrop: rgba(33, 19, 22, .6);
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --section: 44px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; --section: 36px; }
}