/*
  Nurtur Health — design tokens
  Reconstructed for production from the brand's mockup + component spec, since
  no token stylesheet shipped in the design export (see each component's
  prompt.md file) and assets/README.md for the source evidence: the logo files, the SKILL.md
  non-negotiables, and every var(--x) referenced across the components and the
  site mockup). Anchors: comfrey-700 and mauve-500 are sampled from the logo
  files themselves; everything else is a scale built around those two anchors
  plus the literal values used throughout the mockup (radii, spacing, motion).
*/

:root {
  /* ── Comfrey — the olive-green field of the logo, the plant, the deep surfaces ── */
  --comfrey-100: #e7ebdc;
  --comfrey-300: #b7c3a0;
  --comfrey-600: #4c5a37;
  --comfrey-700: #303c24; /* sampled from nurtur-health-wordmark.png */
  --comfrey-800: #28311d;
  --comfrey-900: #1c2314;

  /* ── Mauve — the "nurtur" wordmark colour, used sparingly as a second accent ── */
  --mauve-100: #f4e8f0;
  --mauve-300: #cda3c2;
  --mauve-500: #9c6090; /* sampled from nurtur-health-wordmark.png */
  --mauve-700: #6d3f63;

  /* ── Calendula — the one warm accent (SKILL.md: "never a large background field") ── */
  --calendula-300: #f0c58c;
  --calendula-500: #d9812b;
  --calendula-700: #a1590f;

  /* ── Hypericum — St John's wort turns oil blood-red; used for cautions ── */
  --hypericum-100: #fbe9d6;
  --hypericum-500: #c2701f;
  --hypericum-700: #8a4a12;

  /* ── Paper — the warm, unbleached neutrals ── */
  --paper-000: #ffffff;
  --paper-050: #faf6ed;
  --paper-200: #ede4cf;
  --paper-300: #d9cdac;

  /* ── Surfaces ── */
  --surface-page: var(--paper-050);
  --surface-card: var(--paper-000);
  --surface-deep: var(--comfrey-800);
  --surface-inset: #f2edde;
  --surface-accent-wash: #f9f1f7;
  --surface-caution-wash: #fdf0e0;

  /* ── Borders ── */
  --border-hairline: #e2d9c1;
  --border-strong: #a89b73;
  --border-input: #c7b997;
  --border-on-deep: rgba(240, 236, 220, 0.22);

  /* ── Text ── */
  --text-body: #23281a;
  --text-heading: #1a2012;
  --text-muted: #5c6650;
  --text-disabled: #a19c86;
  --text-accent: var(--calendula-700);
  --text-caution: var(--hypericum-700);
  --text-on-deep: #f3efe1;
  --text-on-deep-muted: #c3c9ae;

  /* ── Accent (calendula only) ── */
  --accent: var(--calendula-500);
  --accent-hover: var(--calendula-700);
  --on-accent: #fffaf1;
  --status-caution: var(--hypericum-500);
  --scrim-photo: linear-gradient(to top, rgba(20, 24, 14, 0.6), rgba(20, 24, 14, 0));

  /* ── Type families ──
     Newsreader carries every headline, product name and Latin binomial —
     per SKILL.md the wordmark itself is set in Newsreader with a calendula
     full stop; the rest of the display type follows from that same face. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ── Type scale ── */
  --type-display-hero-size: clamp(2.125rem, 3.4vw, 3.75rem);
  --type-display-hero-lh: 1.08;
  --type-display-xl-size: 44px;
  --type-display-xl-lh: 52px;
  --type-display-lg-size: 40px;
  --type-display-lg-lh: 48px;
  --type-display-md-size: 34px;
  --type-display-md-lh: 42px;
  --type-display-sm-size: 25px;
  --type-display-sm-lh: 33px;
  --type-display-sm-weight: 450;
  --type-display-xs-size: 20px;
  --type-display-xs-lh: 28px;

  --type-body-lg-size: 20px;
  --type-body-lg-lh: 32px;
  --type-body-md-size: 16px;
  --type-body-md-lh: 26px;
  --type-body-sm-size: 15px;
  --type-body-sm-lh: 24px;

  --type-binomial-size: 15px;
  --type-binomial-lh: 22px;

  --type-eyebrow-size: 11px;
  --type-eyebrow-lh: 16px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-track: 0.13em;

  --type-label-lg-size: 16px;
  --type-label-lg-weight: 500;
  --type-label-lg-track: 0.01em;
  --type-label-md-size: 13px;
  --type-label-md-weight: 600;
  --type-label-md-track: 0.01em;

  --type-mono-size: 13px;
  --type-mono-lh: 20px;
  --type-mono-track: 0em;

  /* ── Spacing (4pt grid) ── */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;
  --space-96: 96px;
  --space-page-margin: 32px;

  /* ── Layout ── */
  --container-page: min(94vw, 1440px);
  --measure-prose: 68ch;
  --measure-narrow: 46ch;
  --touch-min: 44px;
  --control-height: 52px;
  --control-height-sm: 44px;
  --control-height-lg: 56px;

  /* ── Radii — small and square-ish by design, not the rounded ecommerce norm ── */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-round: 999px;

  /* ── Shadows — used once, deliberately, never as decoration ── */
  --shadow-none: none;
  --shadow-raised: 0 2px 4px rgba(27, 32, 19, 0.06), 0 8px 20px rgba(27, 32, 19, 0.08);
  --shadow-lifted: 0 2px 4px rgba(27, 32, 19, 0.06), 0 20px 48px rgba(27, 32, 19, 0.14);

  /* ── Motion ── */
  --duration-enter: 320ms;
  --duration-hover: 150ms;
  --ease-standard: cubic-bezier(0.16, 0.84, 0.44, 1);
  --transition-hover: var(--duration-hover) var(--ease-standard);
}