/* Hallmark · macrostructure: custom bespoke, "the consultation" (a face you can tap, a plan you can send)
 * theme: custom · vibe: berry ink, porcelain, fine line, clinical calm
 * paper oklch(98.2% 0.003 355) · accent oklch(38.9% 0.154 9) berry (the logo) · dark oklch(23.8% 0.057 318) plum (her scrubs)
 * display Marcellus (glyphic, roman only) + body Figtree · axes: light / glyphic-serif / chromatic-berry ~9°
 * nav: bar + mobile sheet + mobile action bar · footer: statement + card
 * Every colour and font on the site comes from here (tests/test_build.py fails on a raw colour elsewhere). */

@font-face { font-family: "Marcellus"; src: url("/assets/fonts/marcellus-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-normal-300-800.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-italic-300-800.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  /* porcelain and petal: near-white with a breath of the berry, never cream */
  --color-paper: #FBF8F9;          --color-paper: oklch(98.2% 0.003 355);
  --color-paper-2: #F4EEF3;        --color-paper-2: oklch(95.5% 0.009 331);
  --color-mist: #EAE1EA;           --color-mist: oklch(91.9% 0.015 326);
  --color-line: #E3D8E0;           --color-line: oklch(89.3% 0.016 335);
  /* wine-black ink */
  --color-ink: #26151F;            --color-ink: oklch(22.3% 0.033 344);
  --color-ink-soft: #5E4B57;       --color-ink-soft: oklch(43.7% 0.032 340);
  --color-ink-faint: #735F6C;      --color-ink-faint: oklch(51.5% 0.032 340);
  /* the logo: berry, its deep shadow and its raspberry highlight */
  --color-berry: #820233;          --color-berry: oklch(38.9% 0.154 9.1);
  --color-berry-deep: #5E0A26;     --color-berry-deep: oklch(31.6% 0.116 8.4);
  --color-berry-hi: #C4104F;       --color-berry-hi: oklch(52.9% 0.205 10.3);
  --color-berry-wash: #F6E4EB;     --color-berry-wash: oklch(93.6% 0.026 353);
  /* plum: her scrubs, for the dark bands */
  --color-plum: #2A1530;           --color-plum: oklch(23.8% 0.057 318);
  --color-plum-2: #3A2342;         --color-plum-2: oklch(29.9% 0.062 317);
  --color-plum-line: #56405F;      --color-plum-line: oklch(40.8% 0.058 316);
  --color-on-plum: #F6EEF3;        --color-on-plum: oklch(95.7% 0.011 339);
  --color-on-plum-soft: #CDBBC9;   --color-on-plum-soft: oklch(81.1% 0.028 333);
  --color-rose: #F07AA3;           --color-rose: oklch(72.5% 0.151 359.5);
  --color-white: #FFFFFF;
  --color-shadow: rgb(42 21 48 / 0.14);
  --color-shadow-strong: rgb(42 21 48 / 0.28);
  --color-scrim: rgb(20 8 22 / 0.55);
  --gradient-berry: linear-gradient(155deg, var(--color-berry-hi) 0%, var(--color-berry) 48%, var(--color-berry-deep) 100%);
  --gradient-plum: radial-gradient(120% 90% at 85% 0%, var(--color-plum-2) 0%, var(--color-plum) 60%);

  /* type */
  --font-display: "Marcellus", "Optima", "Candara", Georgia, serif;
  --font-body: "Figtree", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-display: clamp(2.45rem, 1.55rem + 3.3vw, 4.35rem);
  --text-4xl: clamp(2.1rem, 1.5rem + 2.1vw, 3.25rem);
  --text-3xl: clamp(1.75rem, 1.35rem + 1.45vw, 2.55rem);
  --text-2xl: clamp(1.4rem, 1.22rem + 0.75vw, 1.85rem);
  --text-xl: 1.3rem;
  --text-lg: 1.15rem;
  --text-md: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --measure: 62ch;

  /* space: 4 pt steps */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --page-max: 76rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* shape: interactive things are pills (the syringe barrel), surfaces are soft, fields sit between */
  --radius-pill: 999px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --rule: 1px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 640ms;

  /* layers */
  --z-header: 50;
  --z-bar: 40;
  --z-sheet: 60;
  --z-menu: 70;
}