/*
  Design tokens — EKG Compass
  ───────────────────────────
  Single source of truth for color, spacing, radius, type and shadow
  values used across the whole app. Update a value here, it propagates
  everywhere via CSS custom properties.

  Breakpoint scale (documented reference only — CSS custom properties
  cannot be used inside @media conditions, so these px values must be
  typed literally in every @media rule. Keep new media queries aligned
  to one of these four values instead of picking a new number):
    --bp-xs: 480px   phones — compact spacing, full-width buttons, 16px inputs (iOS zoom fix)
    --bp-sm: 640px   phones/small tablets — mobile bottom nav replaces desktop nav
    --bp-md: 768px   tablets — secondary columns shrink/collapse, grids go to 1 column
    --bp-lg: 1024px  small desktop — tertiary columns (e.g. sidebar) start shrinking
*/

:root {
  --bg:#eef2f7;--surface:#ffffff;--s2:#f7fafc;--border:#dce8f0;--b2:#b8ccd8;
  --text:#0d1a2a;--tx2:#4a6070;--tx3:#5a6878;
  --cyan:#0891b2;--cyan-lo:#0891b210;--cyan-mid:#0891b228;--cyan-hi:#0891b244;
  --nav-bg:#ffffff;--hdr-bg:#07101e;--urgency-critical:#ca2323;

  /* Spacing scale (4px base unit) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;

  /* Radius scale */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;

  /* Type scale — one consistent set of sizes for every heading/body role.
     Use these instead of picking a new px value inline. */
  --fs-caption:9px;--fs-label:10.5px;--fs-body:12px;--fs-body-lg:13px;
  --fs-h6:13px;--fs-h5:15px;--fs-h4:17px;--fs-h3:20px;--fs-h2:26px;--fs-h1:34px;

  /* Font weights */
  --fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;

  /* Line heights */
  --lh-tight:1.15;--lh-snug:1.35;--lh-body:1.6;

  /* Fonts */
  --font-body:'DM Sans',sans-serif;
  --font-display:'DM Sans',sans-serif; /* headings use the same family with heavier weight/tighter tracking, see base.css */
  --font-mono:'JetBrains Mono',monospace;

  /* Shadow scale */
  --shadow-sm:0 1px 6px rgba(8,20,40,.07);
  --shadow-md:0 8px 28px rgba(0,0,0,.16);
  --shadow-lg:0 24px 72px rgba(0,0,0,.44);
}

body.dark {
  --bg:#0a0e18;--surface:#0f1824;--s2:#0c1520;--border:#1e2e40;--b2:#2a3e54;
  --text:#ddeaf5;--tx2:#7a9ab5;--tx3:#5f8bb8;
  --nav-bg:#0f1824;--hdr-bg:#060d16;--urgency-critical:#ff3636;
}