/* GENERATED from packages/design/tokens.css by packages/design/scripts/sync.mjs — do not edit here. */
/* Kardio design tokens — shared by the course (apps/learn), EKG Studio
   (apps/ekg) and EchoSchema (apps/echo).
   ---------------------------------------------------------------------------
   Source of truth: this file. Origin: EKG Studio css/studio.css, as already
   ported to EchoSchema src/lib/styles/theme.css ("Teal": petrol accent on a
   near-white paper ground, hairline borders, 9px button radii).

   Custom properties only — no element selectors. Element defaults live in
   base.css (for the vanilla and Svelte apps, not for the Tailwind app).

   UI chrome follows the theme. Instrument surfaces (ECG paper, B-mode
   sector, Doppler spectrum, schema sheet) keep their own fixed palettes in
   their apps and are deliberately not tokens here.

   Every colour has an `-rgb` channel triple so Tailwind can apply opacity
   modifiers (`bg-accent-soft/60`). Keep both in sync — test/tokens.test.mjs
   checks it. Contrast pairs are enforced by test/contrast.test.mjs. */

:root {
  color-scheme: light;

  /* ── Colour: chrome ── */
  --bg: #f5f7f7;             --bg-rgb: 245 247 247;
  --surface: #ffffff;        --surface-rgb: 255 255 255;
  --surface-soft: #f0f4f3;   --surface-soft-rgb: 240 244 243;
  --ink: #1b302f;            --ink-rgb: 27 48 47;
  --muted: #536b66;          --muted-rgb: 83 107 102;
  --line: #dce5e2;           --line-rgb: 220 229 226;

  /* ── Colour: accent (petrol) ── */
  --accent: #147d6c;         --accent-rgb: 20 125 108;
  --accent-hover: #0d6255;   --accent-hover-rgb: 13 98 85;
  --accent-soft: #e5f3ed;    --accent-soft-rgb: 229 243 237;
  /* Text/icons on --accent-soft: --accent alone only reaches 4.40:1 there. */
  --accent-ink: #0d6255;     --accent-ink-rgb: 13 98 85;
  /* Text on a solid --accent fill (button labels). */
  --on-accent: #ffffff;      --on-accent-rgb: 255 255 255;

  /* ── Colour: status ── */
  --danger: #ad403b;         --danger-rgb: 173 64 59;
  --danger-soft: #fce8e5;    --danger-soft-rgb: 252 232 229;
  --danger-ink: #94362d;     --danger-ink-rgb: 148 54 45;
  --ok: #2f7a3e;             --ok-rgb: 47 122 62;
  --ok-soft: #e3f2e6;        --ok-soft-rgb: 227 242 230;
  --ok-ink: #2f7a3e;         --ok-ink-rgb: 47 122 62;
  --warn: #8a5300;           --warn-rgb: 138 83 0;
  --warn-soft: #fbf0d9;      --warn-soft-rgb: 251 240 217;
  --warn-ink: #8a5300;       --warn-ink-rgb: 138 83 0;

  --shadow: 0 12px 38px #183e3010;
  --shadow-raised: 0 2px 5px #12233322;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101b1b;             --bg-rgb: 16 27 27;
  --surface: #182625;        --surface-rgb: 24 38 37;
  --surface-soft: #20322f;   --surface-soft-rgb: 32 50 47;
  --ink: #e7f2ed;            --ink-rgb: 231 242 237;
  --muted: #a1b9b0;          --muted-rgb: 161 185 176;
  --line: #344b44;           --line-rgb: 52 75 68;

  --accent: #73d4b5;         --accent-rgb: 115 212 181;
  --accent-hover: #9ee8ca;   --accent-hover-rgb: 158 232 202;
  --accent-soft: #26493e;    --accent-soft-rgb: 38 73 62;
  --accent-ink: #9ee8ca;     --accent-ink-rgb: 158 232 202;
  --on-accent: #182625;      --on-accent-rgb: 24 38 37;

  --danger: #ffaba4;         --danger-rgb: 255 171 164;
  --danger-soft: #3c201d;    --danger-soft-rgb: 60 32 29;
  --danger-ink: #ffaba4;     --danger-ink-rgb: 255 171 164;
  --ok: #8fd19e;             --ok-rgb: 143 209 158;
  --ok-soft: #1f3a28;        --ok-soft-rgb: 31 58 40;
  --ok-ink: #8fd19e;         --ok-ink-rgb: 143 209 158;
  --warn: #f2c46b;           --warn-rgb: 242 196 107;
  --warn-soft: #3a2e14;      --warn-soft-rgb: 58 46 20;
  --warn-ink: #f2c46b;       --warn-ink-rgb: 242 196 107;

  --shadow: 0 12px 38px #0003;
  --shadow-raised: 0 2px 5px #0005;
}

/* Theme-independent scales. */
:root {
  /* ── Type ── Inter is self-hosted (fonts.css); system stack as fallback. */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 10px;   /* eyebrow, brand tagline */
  --text-xs: 11px;    /* badges, disclaimer, legends */
  --text-small: 12px; /* help text, labels (EKG Studio name kept) */
  --text-sm: 13px;    /* tabs, menu items, dense prose */
  --text-body: 14px;  /* UI default */
  --text-md: 15px;
  --text-lg: 17px;    /* reading text, card titles */
  --text-xl: 19px;
  --text-2xl: 21px;   /* brand */
  --text-3xl: 24px;   /* dialog / page headings */

  --leading-tight: 1.25;
  --leading-ui: 1.5;
  --leading-read: 1.65;

  /* ── Space ── 4px grid, the values the apps already use. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radius ── 9px buttons are a brand trait. */
  --radius-input: 8px;
  --radius-button: 9px;
  --radius-panel: 12px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --header-pad-y: 20px;
  --header-pad-x: 32px;
  --focus-ring: 3px solid var(--accent);
}