/* ============================================================================
   Re.lief design system — PRIMITIVE tokens (layer 1 of 3)
   Raw ramps and scales, named by WHAT THEY ARE. No roles, no theme switching:
   the semantic layer (semantic.css) maps these onto roles and light/dark.
   Provenance: the "Recovery" identity, groomed + adversarially reviewed
   2026-08-03 (see specifications/backlog/design-system/epic-design-system.md).
   Every colour pair the app relies on is verified by
   test/design-tokens.contrast.test.mjs — never hand-edit a value without re-running it.
   ============================================================================ */

:root {
  /* ── Terra — brand ramp (the signature hue) ──────────────────────────────
     Terra-600 is the interactive brand colour (white text ≈ 4.99:1). Terra-500
     and lighter are fills/illustration only — never under body-size text. */
  --terra-100: #f8e3d0;
  --terra-300: #e0a67c;
  --terra-500: #cf6a41;
  --terra-600: #b1552f;
  --terra-700: #8a4517;
  --terra-900: #55290f;

  /* ── Apricot — the warm end of the Recovery strip; dark-mode CTA fill ───── */
  --apricot-300: #f2b98c;
  --apricot-400: #ec9a5e;
  --apricot-500: #d98a5a;

  /* ── Sage — the BRAND ramp (lead interactive colour, 2026-08-04); also the
     "well" end of the strip and the status-success family. sage-600 is the
     interactive anchor (white text ≈ 5.5:1). ───────────────────────────────── */
  --sage-100: #e3ecdf;
  --sage-300: #b5c9ae;
  --sage-400: #8fae8a;
  --sage-500: #6b9270;
  --sage-600: #47734e;
  --sage-700: #395e40;
  --sage-900: #22371f;

  /* ── Porcelain — warm light surfaces, never pure white ───────────────────
     Ordered by role, not strictly by lightness: card is lightest, raised is a
     warm lift, page sits between. line/line-strong are hairlines. */
  --porcelain-card:        #fffefb;
  --porcelain-raised:      #fbf6ef;
  --porcelain-page:        #faf7f2;
  --porcelain-line:        #ede5d8; /* decorative hairline */
  --porcelain-line-strong: #948773; /* control boundary, ≥3:1 on light + dark */
  --porcelain-deep:        #ded4c2; /* strip track, skeleton base */

  /* ── Ink — warm-tinted text, never neutral grey ──────────────────────────
     ink-400 is decorative/faint graphics ONLY — banned from text (3.5:1). */
  --ink-900: #2e2621;
  --ink-700: #574c43;
  --ink-500: #716556;
  --ink-400: #8f8272;

  /* ── Dark surfaces + text (warm-shifted charcoal, never neutral grey) ──── */
  --dark-page:        #1b1712;
  --dark-card:        #262019;
  --dark-raised:      #302a22;
  --dark-line:        #3e352a;
  --dark-ink:         #efe8dc;
  --dark-ink-muted:   #a99b87;
  --dark-numeral-bg:  #4a3222;
  --dark-numeral-ink: #e8b48c;

  /* ── Pain scale — sage → terracotta, 0→10 ────────────────────────────────
     Strictly monotonically DECREASING luminance (greyscale/CVD/print safe).
     Numerals are large text (≥19px/700) so the WCAG large-text 3:1 standard
     governs: dark ink 0–6, white ink 7–10, every pair ≥3:1. The numeral is
     always rendered — colour is never the only signal. */
  --pain-0:  #8fae8a;  --pain-0-on:  var(--ink-900);
  --pain-1:  #97ab7e;  --pain-1-on:  var(--ink-900);
  --pain-2:  #a3a670;  --pain-2-on:  var(--ink-900);
  --pain-3:  #ad9a62;  --pain-3-on:  var(--ink-900);
  --pain-4:  #b48a55;  --pain-4-on:  var(--ink-900);
  --pain-5:  #b87a4a;  --pain-5-on:  var(--ink-900);
  --pain-6:  #b76a42;  --pain-6-on:  var(--ink-900);
  --pain-7:  #b15a39;  --pain-7-on:  #ffffff;
  --pain-8:  #a54e30;  --pain-8-on:  #ffffff;
  --pain-9:  #984327;  --pain-9-on:  #ffffff;
  --pain-10: #8f3f20;  --pain-10-on: #ffffff;
  --pain-selection-ring: var(--terra-700);

  /* ── Status primitives ───────────────────────────────────────────────────
     danger reads clearly RED, distinct from the terracotta anchor. */
  --green-base: #4c6b4e; --green-surface: #e3ecdf; --green-border: #b5c9ae;
  --amber-base: #9a5b04; --amber-surface: #f7e8cf; --amber-border: #e6c9a0;
  --red-base:   #a3232b; --red-surface:   #f7dedf; --red-border:   #e3a9ac;

  /* ── Recovery strip gradient stops ───────────────────────────────────────
     Apricot (warm, pain) → sage (well): filling up moves toward health. */
  --strip-apricot: #ec9a5e;
  --strip-sage:    #8fae8a;
  --strip-apricot-dark: #d98a5a;
  --strip-sage-dark:    #7f9d7a;

  /* ── Spacing scale (spacious profile) ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px; /* cards */
  --radius-xl:   22px; /* modals / sheets */
  --radius-pill: 999px;

  /* ── Type scale (px) ──────────────────────────────────────────────────────
     Pain numerals are large text so the 3:1 pain-scale standard applies. */
  --text-display:   28px;
  --text-title:     24px;
  --text-section:   17px;
  --text-body:      15px;
  --text-secondary: 13px;
  --text-caption:   12px; /* floor (M3) */
  --text-eyebrow:   11px;
  --text-pain:      19px; /* PainScore sm — large-text bold */
  --text-pain-lg:   26px; /* PainScore lg / hero numerals */

  /* ── Elevation — warm-tinted (light). Dark elevation is carried by surface
     lightening + borders (black shadows vanish on #1b1712), so dark shadows
     stay minimal — see semantic.css. ─────────────────────────────────────── */
  --elevation-1: 0 1px 2px rgba(74, 45, 22, 0.05);
  --elevation-2: 0 2px 6px -2px rgba(74, 45, 22, 0.12);
  --elevation-3: 0 12px 28px -16px rgba(74, 45, 22, 0.35);
  --elevation-1-dark: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elevation-2-dark: 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --elevation-3-dark: 0 12px 28px -16px rgba(0, 0, 0, 0.75);

  /* ── Motion ───────────────────────────────────────────────────────────────
     Every decorative animation sits behind prefers-reduced-motion (see M3). */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ───────────────────────────────────────────────────────────────
     Breakpoint tokens are documentation for the values used in @media queries
     (CSS media features cannot read custom properties). */
  --container-max: 1024px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ── Misc ─────────────────────────────────────────────────────────────── */
  --disabled-opacity: 0.5;
}