/* Design tokens for the three themes (user directive 2026-10-11, replaces Bento Dark).
   Selected with <html data-theme="ledger|graphite|evergreen">. Components use these
   variables only — no raw colours outside this file. Mockups: mockups/production/. */

@font-face {
  font-family: "Geist";
  src: url("/vendor/fonts/geist.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/vendor/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/vendor/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/vendor/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/vendor/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

/* ---- A · Ledger: light, neutral, one blue accent (default) ---- */
:root,
:root[data-theme="ledger"] {
  color-scheme: light;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: var(--font);
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-sunken: #f2f4f7;
  --hover: #f2f4f7;
  --border: #e5e7eb;
  --border-soft: #eef0f3;
  --border-strong: #d0d5dd;
  --text: #0b0f19;
  --text-muted: #5b6271;
  --link: #2453e8;
  --link-hover: #173ab8;
  --accent: #2453e8;
  --accent-on: #ffffff;
  --accent-soft: #e8edff;
  --accent-soft-fg: #173ab8;
  --focus: #2453e8;
  --in: #067647;
  --warn: #b54708;
  --warn-bg: #fffaeb;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --ok: #067647;
  --ok-bg: #ecfdf3;
  --nav-bg: #ffffff;
  --nav-fg: #4a5160;
  --nav-fg-active: #0b0f19;
  --nav-bg-active: #f2f4f7;
  --nav-border: #e5e7eb;
  --nav-muted: #5b6271;
  --brand-mark: #0b0f19;
  --brand-mark-fg: #ffffff;
  --scrim: rgb(11 15 25 / 0.45);
  --shadow: none;
  --shadow-pop: 0 12px 32px rgb(11 15 25 / 0.12);
  --r-card: 12px;
  --r-ctl: 8px;
  /* category tints: tag background / text */
  --peach-bg: #fef0e6;
  --peach-fg: #93370d;
  --sky-bg: #eaf3ff;
  --sky-fg: #1849a9;
  --lemon-bg: #fef7c3;
  --lemon-fg: #713b12;
  --lilac-bg: #f1ebff;
  --lilac-fg: #5925dc;
  --mint-bg: #e6f7ee;
  --mint-fg: #05603a;
  --neutral-bg: #f2f4f7;
  --neutral-fg: #344054;
  /* chart marks (Chart.js reads these at runtime) */
  --chart-peach: #f79009;
  --chart-sky: #2e90fa;
  --chart-lemon: #ca8504;
  --chart-lilac: #9e77ed;
  --chart-mint: #12b76a;
  --chart-neutral: #98a2b3;
  --chart-accent: #2453e8;
  --chart-compare: #9aa1ae;
  --chart-grid: #f1f2f5;
  --chart-in: #067647;
  --chart-out: #2453e8;
}

/* ---- B · Graphite: dark, dense, monospaced figures ---- */
:root[data-theme="graphite"] {
  color-scheme: dark;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
  --bg: #0c0d0f;
  --surface: #111215;
  --surface-2: #15161a;
  --surface-sunken: #0e0f12;
  --hover: #1a1c20;
  --border: #222429;
  --border-soft: #1a1c20;
  --border-strong: #33363d;
  --text: #e8e9eb;
  --text-muted: #9da1a9;
  --link: #8fb4ff;
  --link-hover: #c3d6ff;
  --accent: #7fa8ff;
  --accent-on: #0c0d0f;
  --accent-soft: #1c2333;
  --accent-soft-fg: #c3d6ff;
  --focus: #7fa8ff;
  --in: #4ade95;
  --warn: #f5b85a;
  --warn-bg: #2a2111;
  --danger: #ff8a80;
  --danger-bg: #2c1513;
  --ok: #4ade95;
  --ok-bg: #0f2a1e;
  --nav-bg: #0c0d0f;
  --nav-fg: #9da1a9;
  --nav-fg-active: #e8e9eb;
  --nav-bg-active: #1c1e22;
  --nav-border: #222429;
  --nav-muted: #7d828b;
  --brand-mark: #7fa8ff;
  --brand-mark-fg: #0c0d0f;
  --scrim: rgb(0 0 0 / 0.6);
  --shadow: none;
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5);
  --r-card: 10px;
  --r-ctl: 6px;
  --peach-bg: #2c1a10;
  --peach-fg: #f7b27a;
  --sky-bg: #12233d;
  --sky-fg: #8fc1ff;
  --lemon-bg: #2a2111;
  --lemon-fg: #f5c86a;
  --lilac-bg: #221a38;
  --lilac-fg: #c9b3ff;
  --mint-bg: #0f2a1e;
  --mint-fg: #6ee7a8;
  --neutral-bg: #1c1e22;
  --neutral-fg: #c9ccd2;
  --chart-peach: #f5b85a;
  --chart-sky: #5bb4ff;
  --chart-lemon: #e5c158;
  --chart-lilac: #c4a7ff;
  --chart-mint: #4ade95;
  --chart-neutral: #8b9099;
  --chart-accent: #7fa8ff;
  --chart-compare: #f5b85a;
  --chart-grid: #1a1c20;
  --chart-in: #4ade95;
  --chart-out: #7fa8ff;
}

/* ---- C · Evergreen: calm, brand-green navigation ---- */
:root[data-theme="evergreen"] {
  color-scheme: light;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: var(--font);
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --surface-sunken: #eef2f0;
  --hover: #eef2f0;
  --border: #e3e8e5;
  --border-soft: #edf1ef;
  --border-strong: #d5ddd9;
  --text: #101a16;
  --text-muted: #56635d;
  --link: #0e5a43;
  --link-hover: #08402f;
  --accent: #0e3b2e;
  --accent-on: #ffffff;
  --accent-soft: #d8f3c5;
  --accent-soft-fg: #0e3b2e;
  --focus: #0e5a43;
  --in: #0e5a43;
  --warn: #9a5b00;
  --warn-bg: #fff4e5;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --ok: #0e5a43;
  --ok-bg: #e3f3e9;
  --nav-bg: #0e3b2e;
  --nav-fg: #bfd6cc;
  --nav-fg-active: #ffffff;
  --nav-bg-active: rgb(255 255 255 / 0.12);
  --nav-border: #0e3b2e;
  --nav-muted: #bfd6cc;
  --brand-mark: #d8f3c5;
  --brand-mark-fg: #0e3b2e;
  --scrim: rgb(16 26 22 / 0.45);
  --shadow: none;
  --shadow-pop: 0 12px 32px rgb(16 26 22 / 0.14);
  --r-card: 16px;
  --r-ctl: 8px;
  --peach-bg: #fbe6df;
  --peach-fg: #8a2f17;
  --sky-bg: #e3ecfd;
  --sky-fg: #1d4296;
  --lemon-bg: #f8eccf;
  --lemon-fg: #6b4400;
  --lilac-bg: #f2e5f6;
  --lilac-fg: #6b2d80;
  --mint-bg: #e3f3e9;
  --mint-fg: #0e5a43;
  --neutral-bg: #edf1ef;
  --neutral-fg: #2e3a35;
  --chart-peach: #e07a5f;
  --chart-sky: #5b8def;
  --chart-lemon: #c08a2e;
  --chart-lilac: #b678c9;
  --chart-mint: #2f6b55;
  --chart-neutral: #a7b3ad;
  --chart-accent: #0e3b2e;
  --chart-compare: #9fb3aa;
  --chart-grid: #edf1ef;
  --chart-in: #9fd3b5;
  --chart-out: #101a16;
}

/* layout scale (shared) */
:root {
  --gap: 20px;
  --pad-card: 20px;
  --r-pill: 999px;
  --sidebar-w: 240px;
  /* theme picker swatches (same in every theme) */
  --swatch-ledger: linear-gradient(135deg, #ffffff 50%, #2453e8 50%);
  --swatch-graphite: linear-gradient(135deg, #111215 50%, #7fa8ff 50%);
  --swatch-evergreen: linear-gradient(135deg, #f3f5f4 50%, #0e3b2e 50%);
}