/* Design tokens (spec §10.1). Everything else references these. */
@font-face {
  font-family: "Inter";
  src: url("/vendor/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces (light; ThriveMedix navy + cyan) */
  --bg: #F4F7FC;  --bg-2: #EDF2FA;  --surface: #FFFFFF;  --surface-2: #F6F8FD;  --surface-3: #E9EEF8;
  --line: rgba(25,20,102,.09);  --line-strong: rgba(25,20,102,.18);
  --tint: rgba(25,20,102,.05);  --tint-2: rgba(25,20,102,.08);
  /* text */
  --text: #1A1747;  --text-2: #4A5278;  --text-3: #626A8C;
  /* brand (from the logo: navy #19146A, cyan #3CCBF5) */
  --brand-1: #2A2399;  --brand-2: #6D5BE8;  --brand-3: #0E7490;  --brand-cyan: #3CCBF5;
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2) 60%, var(--brand-cyan));
  --btn-grad: linear-gradient(135deg, #6366F1, #8B5CF6 55%, #22D3EE);
  --glow: 0 0 0 1px rgba(42,35,153,.18), 0 6px 20px -8px rgba(42,35,153,.45);
  /* semantic (status only!) */
  --pass: #047857;  --fail: #BE123C;  --warn: #B45309;  --info: #1D4ED8;  --nm: #5B6B8F; /* not measured */
  /* bands */
  --band-poor: #BE123C;  --band-needs: #B45309;  --band-strong: #1D4ED8;  --band-opt: #047857;
  /* shape & motion */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(25,20,102,.06), 0 10px 28px -14px rgba(25,20,102,.22);
  --ease: cubic-bezier(.2,.8,.2,1);  --t-fast: 140ms;  --t-med: 260ms;  --t-slow: 700ms;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", Consolas, monospace;

  /* type scale (spec §10.1) */
  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-16: 16px;  --fs-20: 20px;  --fs-28: 28px;  --fs-40: 40px;  --fs-56: 56px;
  /* 4-pt spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  /* layout */
  --content-max: 1320px;  --rail-w: 76px;  --rail-w-open: 232px;  --topbar-h: 64px;
  /* focus ring: 2 px brand-3 (spec §10.6) */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-3);
}