/* ==========================================================================
   Sarah & Co. — design tokens. Locked. Never redefine one of these values
   anywhere else in the CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Colour

   WCAG 2.1 contrast of each foreground against the two page grounds.
   Threshold: 4.5:1 (normal-size body text, AA).

     token         vs ivory #F6F3EE      vs ink #1B1A18
     -----------   -----------------      -------------------
     ivory          1.00   —              15.71  PASS
     ink           15.71   PASS            1.00  —
     terracotta     3.46   FAIL            4.54  PASS
     stone          5.15   PASS            3.05  FAIL
     taupe          2.21   FAIL            7.11  PASS
     linen          1.11   FAIL           14.16  PASS
     hair           1.38   FAIL           11.41  PASS
     on-ink         2.03   FAIL            7.73  PASS

   Ivory text on terracotta is 3.46:1 and FAILS 4.5:1 — this is why buttons
   are ink, not terracotta. Terracotta is accent only (hairlines, hover, a
   single emphasised element); it never sits behind body text on either
   ground. stone carries body text on ivory only. on-ink carries text on ink
   only. taupe, linen and hair are surface/rule colours, not text.

   Source note (2026-09-08): every value above is ruled and executed. stone is
   #6E655D, ruled by Campbell 2026-09-05 over the vault's proposed #7D7268,
   which fails the 4.5:1 floor at 4.24:1 on ivory. taupe, linen, hair and on-ink
   were adopted into the vault table on the same ruling, at these values. The
   record of both is in Build/open-decisions.md — "--stone: vault's proposed
   value fails WCAG AA" and "--taupe, --linen, --hair, --on-ink: vault table
   incomplete", both closed 2026-09-05.

   Do not "fix" stone against ink. The 3.05 FAIL above measures a pairing that
   does not occur on the site: stone is an ivory-ground colour only, and on-ink
   carries text on the ink footer at 7.73:1.
   -------------------------------------------------------------------------- */
:root {
  --ivory: #F6F3EE;      /* Page background */
  --ink: #1B1A18;        /* Text, buttons, dark bands */
  --terracotta: #AE736F; /* Accent only — punctuation, never a field */
  --stone: #6E655D;      /* Secondary text on ivory (vault proposes #7D7268 — see note above) */
  --taupe: #B3A395;      /* Dividers. From the vault table, [PROPOSED]; not yet used anywhere */
  --linen: #EDE7DF;      /* Alternating section bands — .band background */
  --hair: #D9D0C5;       /* Hairline rules and borders */
  --on-ink: #B6ABA1;     /* Muted text on ink — dark bands and the footer only */
}

/* --------------------------------------------------------------------------
   Sizing

   Every fluid type step, every reading measure, and the page-shell
   dimensions that recur across rules. Values are exactly as they were
   inline in the comp — this only names them. Named for their role, never
   by scale position.
   -------------------------------------------------------------------------- */
:root {
  /* Page shell */
  --width-page: 1180px;    /* .wrap, .masthead__in, .hero__in */
  --width-narrow: 760px;   /* .narrow */
  --gutter: 34px;          /* horizontal padding on every page container */

  /* Fluid type */
  --size-hero: clamp(2.4rem, 6.4vw, 4.6rem);      /* hero wordmark h1 */
  --size-h2: clamp(2rem, 4.4vw, 3.2rem);          /* section headings */
  --size-tag: clamp(1.6rem, 3.6vw, 2.5rem);       /* hero italic tagline */
  /* "BEAUTY" under the wordmark. Locked to --size-hero at the ratio measured
     directly from src/images/Sarah___CO_logo_Black.svg's own letterform
     bounding boxes (via SVGGraphicsElement.getBBox(), not eyeballed):
     "SARAH & CO." group height 42.17 : "BEAUTY" group height 14.70 = 2.8687:1.
     calc() (not an independent clamp) keeps that exact ratio at every
     viewport width, not just at sampled breakpoints. */
  --size-hero-sub: calc(var(--size-hero) / 2.8687);

  /* Fluid dimensions */
  --rule-hero-sub: clamp(24px, 5vw, 54px);        /* the rules flanking the subtitle */
  --pad-consult-body: clamp(56px, 7vw, 104px) clamp(34px, 6vw, 88px); /* consulting panel padding */
  --size-team-plate: clamp(300px, 46vh, 520px);   /* full-bleed team photo height */

  /* Reading measures */
  --measure: 62ch;                 /* default paragraph */
  --measure-lede: 52ch;            /* .lede */
  --measure-say: 40ch;             /* hero supporting line */
  --measure-consult-head: 14ch;    /* consulting h2 */
  --measure-consult-body: 46ch;    /* consulting paragraph */

  /* Spacing */
  --space-group: 64px;             /* gap between major sub-groups in a section:
                                      category-page subsections, a section intro
                                      and its content */
}