/* =============================================================
   SAGE PHARMACY — DESIGN TOKENS
   Warm, human, care-focused. Tuned for 45+ readability.
   All color in oklch. Low chroma on neutrals (warm-leaning).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- TYPE SCALE (rem; base 17px for 45+ legibility) ---------- */
  --fs-display: clamp(2.6rem, 1.8rem + 3vw, 4rem);   /* hero headlines */
  --fs-h1: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
  --fs-h2: clamp(1.7rem, 1.4rem + 1.1vw, 2.25rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lg: 1.1875rem;   /* 19px lead */
  --fs-body: 1.0625rem; /* 17px base */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-xs: 0.8125rem;   /* 13px labels */
  --lh-tight: 1.15;
  --lh-snug: 1.28;
  --lh-body: 1.6;
  --tracking-label: 0.06em;

  /* ---------- WARM NEUTRALS (warm-leaning, low chroma) ---------- */
  --paper:    oklch(0.988 0.008 92);  /* page background, warm off-white */
  --cream:    oklch(0.972 0.013 88);  /* alt sections */
  --sand:     oklch(0.945 0.016 85);  /* subtle panels */
  --sand-deep:oklch(0.912 0.018 83);  /* hover panels */
  --line:     oklch(0.892 0.013 84);  /* borders */
  --line-soft:oklch(0.928 0.011 85);
  --stone-700:oklch(0.44 0.014 78);   /* secondary text */
  --stone-500:oklch(0.56 0.013 76);   /* muted text */
  --stone-400:oklch(0.66 0.012 76);   /* placeholder */
  --ink:      oklch(0.27 0.016 80);   /* primary text, warm near-black */
  --ink-soft: oklch(0.34 0.016 80);

  /* ---------- BRAND GREEN (pine -> emerald -> mint) ---------- */
  --green-50:  oklch(0.972 0.020 165);
  --green-100: oklch(0.940 0.040 165);
  --green-200: oklch(0.890 0.066 164);
  --green-300: oklch(0.820 0.090 163);
  --green-400: oklch(0.720 0.108 162);
  --green-500: oklch(0.612 0.114 162);
  --green-600: oklch(0.520 0.108 162);  /* PRIMARY */
  --green-700: oklch(0.440 0.092 163);
  --green-800: oklch(0.360 0.070 165);
  --green-900: oklch(0.285 0.050 167);  /* deep ink-green */

  /* ---------- WARM ACCENT (apricot / coral) — used sparingly ---------- */
  --apricot-100: oklch(0.945 0.040 60);
  --apricot-300: oklch(0.840 0.090 56);
  --apricot-500: oklch(0.745 0.128 52);  /* secondary accent */
  --apricot-600: oklch(0.680 0.140 47);
  --apricot-700: oklch(0.580 0.128 42);

  /* ---------- FUNCTIONAL ---------- */
  --success: var(--green-600);
  --success-bg: var(--green-50);
  --warning: oklch(0.760 0.130 78);
  --warning-bg: oklch(0.962 0.040 84);
  --danger: oklch(0.560 0.165 28);
  --danger-bg: oklch(0.960 0.030 30);
  --info: oklch(0.560 0.085 230);
  --info-bg: oklch(0.962 0.025 230);
  --savings: var(--green-700);

  /* ---------- SEMANTIC ROLES ---------- */
  --bg: var(--paper);
  --surface: #ffffff;
  --surface-sunk: var(--cream);
  --text: var(--ink);
  --text-muted: var(--stone-500);
  --text-secondary: var(--stone-700);
  --border: var(--line);
  --brand: var(--green-600);
  --brand-ink: var(--green-900);
  --on-brand: oklch(0.985 0.012 160);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-7: 1.75rem;  --s-8: 2rem;
  --s-10: 2.5rem;  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;
  --s-24: 6rem;    --s-32: 8rem;

  /* ---------- RADIUS (soft / friendly) ---------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px; --r-lg: 18px;
  --r-xl: 26px; --r-2xl: 34px; --r-full: 999px;

  /* ---------- SHADOWS (soft, warm-tinted, low spread) ---------- */
  --sh-xs: 0 1px 2px oklch(0.40 0.03 80 / 0.06);
  --sh-sm: 0 1px 3px oklch(0.40 0.03 80 / 0.07), 0 1px 2px oklch(0.40 0.03 80 / 0.05);
  --sh-md: 0 4px 14px oklch(0.40 0.03 80 / 0.08), 0 2px 4px oklch(0.40 0.03 80 / 0.05);
  --sh-lg: 0 14px 38px oklch(0.38 0.04 80 / 0.12), 0 4px 10px oklch(0.40 0.03 80 / 0.06);
  --sh-xl: 0 28px 64px oklch(0.36 0.05 90 / 0.16), 0 8px 18px oklch(0.40 0.03 80 / 0.08);
  --sh-brand: 0 10px 26px oklch(0.52 0.108 162 / 0.22);
  --sh-focus: 0 0 0 3px oklch(0.612 0.114 162 / 0.32);

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}