/* Hallmark · tokens · Bloom Lorraine Co.
 * theme: custom (tuned) · vibe: "canvas and thread, coastal Southern, timeless"
 * paper: oklch(97.4% 0.009 80) · accent: oklch(51.9% 0.079 257) (her logo’s thread blue, kept at brand chroma)
 * display: Cormorant Garamond 700 · body: Jost 400 · outlier: Mrs Saint Delafield (salutation + signature only)
 * axes: light / roman-serif / cool
 * Every colour, font, size, space, radius, easing, duration and layer on the site is declared here.
 * styles.css may only reference these by name. build.py fails if it finds a raw colour there.
 */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("fonts/mrs-saint-delafield-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Metric-matched fallbacks (computed from the font files) so nothing jumps while fonts load */
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"); font-weight: 700; size-adjust: 92.4%; ascent-override: 99.99%; descent-override: 31.06%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); font-weight: 400; size-adjust: 97.34%; ascent-override: 94.92%; descent-override: 29.48%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 95.69%; ascent-override: 111.81%; descent-override: 39.19%; line-gap-override: 0%; }

:root {
  /* ── paper: warm canvas, tinted toward hue 80 ───────────────────────── */
  --color-paper:        oklch(97.4% 0.009 80);
  --color-paper-2:      oklch(94.6% 0.013 78);
  --color-paper-3:      oklch(91.5% 0.019 78);
  --color-paper-blue:   oklch(95.6% 0.012 255);   /* hydrangea wash */
  --color-rule:         oklch(83% 0.018 76);
  --color-rule-2:       oklch(89.5% 0.014 78);

  /* ── ink: navy thread, tinted toward hue 257 ────────────────────────── */
  --color-ink:          oklch(25% 0.035 257);
  --color-ink-2:        oklch(37% 0.035 257);
  --color-muted:        oklch(46% 0.03 257);

  /* ── the one accent: her logo’s thread blue ─────────────────────────── */
  --color-accent:       oklch(51.9% 0.079 257);
  --color-accent-deep:  oklch(43% 0.078 258);
  --color-accent-ink:   oklch(97.4% 0.009 80);
  --color-focus:        oklch(50% 0.16 257);

  /* ── thread + hoop (illustration palette, only inside the hoop) ─────── */
  --color-thread:            oklch(51.9% 0.079 257);
  --color-thread-shade:      oklch(41% 0.078 258);
  --color-thread-light:      oklch(63% 0.072 257);
  --color-thread-white:      oklch(98.8% 0.004 85);
  --color-thread-white-shade:oklch(86% 0.014 80);
  --color-fabric:            oklch(96.2% 0.013 82);
  --color-fabric-weave:      oklch(92.2% 0.017 80);
  --color-wood-light:        oklch(85% 0.055 78);
  --color-wood:              oklch(74% 0.072 70);
  --color-wood-deep:         oklch(58% 0.075 60);
  --color-brass:             oklch(80% 0.09 88);
  --color-brass-deep:        oklch(62% 0.09 80);

  /* ── states ─────────────────────────────────────────────────────────── */
  --color-error:        oklch(49% 0.15 28);
  --color-success:      oklch(47% 0.07 142);

  /* ── modifiers (alpha allowed only for shadows + scrims) ────────────── */
  --color-shadow:       oklch(25% 0.035 257 / 0.16);
  --color-shadow-soft:  oklch(25% 0.035 257 / 0.08);
  --color-scrim:        oklch(18% 0.03 257 / 0.86);

  /* ── type ───────────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --font-body:    "Jost", "Jost Fallback", Arial, sans-serif;
  --font-script:  "Mrs Saint Delafield", "Cormorant Garamond", cursive;

  /* 1.25 scale from a 16 px root; body sits at 17 px */
  --text-xs:      0.8125rem;   /* 13 · small caps labels */
  --text-sm:      0.9375rem;   /* 15 · notes, captions */
  --text-base:    1.0625rem;   /* 17 · body */
  --text-md:      1.25rem;     /* 20 · plate names, small heads */
  --text-lg:      1.5625rem;   /* 25 · h3, price, lede */
  --text-2xl:     clamp(2rem, 1.4vw + 1.5rem, 2.6rem);        /* h2, quote, salutation */
  --text-display: clamp(2.5rem, 2.6vw + 1.6rem, 3.9rem);      /* h1 */

  --leading-display: 1.04;
  --leading-body:    1.62;
  --tracking-display: -0.018em;
  --tracking-caps:   0.16em;
  --measure: 34rem;

  /* ── space: 4 pt base, named by role ───────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --page-max:  76rem;
  --masthead-h: 6rem;       /* N12 banner 2.5rem + bar 3.5rem: every in page sticky docks below this */

  /* ── shape ──────────────────────────────────────────────────────────── */
  --radius-sm:   0.375rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.5rem;
  --radius-pill: 999px;
  --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);
  --rule-hair:   1px;
  --rule-thread: 2px;
  --hit:         2.75rem;   /* 44 px touch target */

  /* ── motion ─────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   110ms;
  --dur-short:   200ms;
  --dur-long:    440ms;
  --stitch-step: 22ms;       /* delay between stitches as a line sews itself */

  /* ── layers ─────────────────────────────────────────────────────────── */
  --z-under:    0;
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;       /* in page: sticky product info, FAQ index, buy bar */
  --z-nav:      300;       /* the masthead always paints over in page stickies */
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── elevation (one shadow per element, never stacked) ──────────────── */
  --shadow-print: 0 14px 28px var(--color-shadow);
  --shadow-whisper: 0 1px 2px var(--color-shadow-soft);
}