/* =========================================================
   CareOS — Design Tokens
   ========================================================= */

:root {
  color-scheme: light;
  /* ---------- Color: Neutrals (warm) ---------- */
  --bone-50:  oklch(98%  0.006 80);
  --bone-100: oklch(96%  0.008 80);
  --bone-200: oklch(93%  0.010 80);
  --bone-300: oklch(88%  0.012 80);
  --bone-400: oklch(78%  0.012 80);
  --bone-500: oklch(60%  0.010 80);
  --bone-600: oklch(45%  0.010 80);
  --bone-700: oklch(32%  0.012 240);
  --bone-800: oklch(22%  0.014 240);
  --bone-900: oklch(15%  0.014 240);
  --ink:      oklch(12%  0.014 240);

  /* ---------- Color: Sage (the vital accent) ---------- */
  --sage-50:  oklch(96%  0.020 165);
  --sage-100: oklch(92%  0.035 165);
  --sage-200: oklch(85%  0.055 165);
  --sage-300: oklch(76%  0.075 165);
  --sage-400: oklch(66%  0.090 165);
  --sage-500: oklch(56%  0.095 165);
  --sage-600: oklch(46%  0.080 165);
  --sage-700: oklch(36%  0.060 165);
  --sage-800: oklch(28%  0.045 165);

  /* ---------- Color: Coral (signal / critical) ---------- */
  --coral-300: oklch(78%  0.110 30);
  --coral-400: oklch(70%  0.150 30);
  --coral-500: oklch(62%  0.180 30);
  --coral-600: oklch(54%  0.180 30);

  /* ---------- Color: Amber (caution / handover) ---------- */
  --amber-300: oklch(85%  0.090 75);
  --amber-400: oklch(78%  0.120 75);
  --amber-500: oklch(72%  0.145 75);

  /* ---------- Color: Plum (off-duty / archive) ---------- */
  --plum-400: oklch(55% 0.060 320);
  --plum-500: oklch(45% 0.065 320);

  /* ---------- Semantic ---------- */
  --bg:           var(--bone-50);
  --surface:      var(--bone-100);
  --surface-2:    var(--bone-200);
  --line:         var(--bone-300);
  --line-strong:  var(--bone-400);
  --muted:        var(--bone-500);
  --text-soft:    var(--bone-700);
  --text:         var(--ink);
  --accent:       var(--sage-600);
  --accent-soft:  var(--sage-100);
  --critical:     var(--coral-500);
  --caution:      var(--amber-500);

  --shadow-1: 0 1px 2px rgba(20,20,20,0.04), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-2: 0 4px 24px rgba(20,20,20,0.06);
  --scrim:    rgba(20,20,20,0.45);

  /* ---------- Type ---------- */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-ui:      "Geist", "Inter Tight", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --fs-xs:    11px;
  --fs-sm:    12.5px;
  --fs-base:  14px;
  --fs-md:    16px;
  --fs-lg:    19px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;
  --fs-5xl:   96px;
  --fs-6xl:   136px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;

  --tr-tight:   -0.025em;
  --tr-display: -0.035em;
  --tr-mono:    -0.005em;
  --tr-eyebrow:  0.18em;

  /* ---------- Space (4px base, with editorial breathing room) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 192px;

  /* ---------- Radii (restrained) ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-5: 14px;
  --r-6: 20px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(15,18,24,0.04), 0 1px 2px rgba(15,18,24,0.04);
  --shadow-2: 0 1px 0 rgba(15,18,24,0.04), 0 2px 6px rgba(15,18,24,0.06), 0 8px 20px -8px rgba(15,18,24,0.08);
  --shadow-3: 0 1px 0 rgba(15,18,24,0.04), 0 4px 14px rgba(15,18,24,0.08), 0 24px 48px -16px rgba(15,18,24,0.16);
  --shadow-4: 0 1px 0 rgba(15,18,24,0.05), 0 12px 32px rgba(15,18,24,0.10), 0 48px 96px -24px rgba(15,18,24,0.22);
  --shadow-glow-sage: 0 0 0 1px var(--sage-300), 0 8px 24px -8px oklch(56% 0.095 165 / 0.35);

  /* ---------- Motion (cinematic) ---------- */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.50, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0.05, 0.20, 0.95);
  --ease-organic:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-clinical:    cubic-bezier(0.45, 0, 0.15, 1);

  /* Fast tier — interaction feedback (hover, press, focus, toggles, micro UI) */
  --t-instant: 80ms;
  --t-fast:    140ms;
  --t-quick:   200ms;
  /* Medium — small state changes, panel reveals, sort/filter */
  --t-base:    280ms;
  --t-medium:  420ms;
  /* Cinematic — first-load entrances, big route transitions, hero motion */
  --t-slow:    720ms;
  --t-cine:    1100ms;
  --t-epic:    1600ms;

  --stagger-1: 60ms;
  --stagger-2: 90ms;
  --stagger-3: 140ms;
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Neutrals re-pitched for a warm, clinical night palette.
     Bone tokens flip so existing rules using --bone-50..900 read as dark surfaces / light text. */
  --bone-50:  oklch(13%  0.012 240);
  --bone-100: oklch(16%  0.014 240);
  --bone-200: oklch(20%  0.016 240);
  --bone-300: oklch(26%  0.016 240);
  --bone-400: oklch(36%  0.014 240);
  --bone-500: oklch(54%  0.012 80);
  --bone-600: oklch(70%  0.012 80);
  --bone-700: oklch(82%  0.010 80);
  --bone-800: oklch(90%  0.008 80);
  --bone-900: oklch(95%  0.006 80);
  --ink:      oklch(97%  0.006 80);

  /* Accents stay recognisable but de-saturated for low light */
  --sage-50:  oklch(22% 0.030 165);
  --sage-100: oklch(26% 0.045 165);
  --sage-200: oklch(32% 0.060 165);
  --sage-300: oklch(48% 0.080 165);
  --sage-400: oklch(60% 0.090 165);
  --sage-500: oklch(68% 0.095 165);
  --sage-600: oklch(74% 0.090 165);
  --sage-700: oklch(84% 0.060 165);
  --sage-800: oklch(92% 0.040 165);

  --coral-300: oklch(58% 0.140 30);
  --coral-400: oklch(66% 0.165 30);
  --coral-500: oklch(72% 0.170 30);
  --coral-600: oklch(78% 0.150 30);

  --amber-300: oklch(60% 0.090 75);
  --amber-400: oklch(72% 0.120 75);
  --amber-500: oklch(80% 0.140 75);

  --plum-400: oklch(62% 0.070 320);
  --plum-500: oklch(72% 0.075 320);

  /* Semantic re-mapping (dark) */
  --bg:           oklch(11% 0.010 240);
  --surface:      var(--bone-100);
  --surface-2:    var(--bone-200);
  --line:         oklch(24% 0.012 240);
  --line-strong:  oklch(34% 0.012 240);
  --muted:        oklch(60% 0.010 80);
  --text-soft:    oklch(80% 0.008 80);
  --text:         var(--ink);
  --accent:       var(--sage-500);
  --accent-soft:  var(--sage-200);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-2: 0 4px 24px rgba(0,0,0,0.5);
  --scrim:    rgba(0,0,0,0.6);
}
:root[data-theme="dark"] ::selection { background: var(--sage-500); color: var(--bone-50); }

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Type primitives ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  font-style: normal;
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  font-feature-settings: "tnum", "zero";
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Selection ---------- */
::selection { background: var(--ink); color: var(--bone-50); }