/* Design tokens. The colours mirror the table in CLAUDE.md;
   tests/test_design_tokens.py keeps the two in sync and checks text contrast. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk/SchibstedGrotesk-wght.1c0fefc90fad.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Var-Roman.30c8bc7d4490.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --color-page: #111316;
  --color-surface: #1a1d21;
  --color-sidebar: #0b0d0f;
  --color-sidebar-active: #2c3036;
  --color-raised: #232a35;
  --color-border: #2c3137;
  --color-divider: #262a30;
  --color-axis: #3a4048;
  --color-text: #e8eaed;
  --color-muted: #9aa1a9;
  --color-accent: #6e9bf5;
  --color-on-accent: #0b0d0f;
  --color-review-bg: #3d2e14;
  --color-review-text: #f2c879;
  --color-review-border: #6b5223;
  --color-error-bg: #3a1a16;
  --color-error-text: #f5a396;
  --color-error-border: #8a3a2e;
  --color-info-bg: #1c2a45;
  --color-info-text: #a9c1f2;
  --color-transfer-bg: #2e2140;
  --color-transfer-text: #cdb2ee;
  --color-series-2: #f0a35e;

  /* Category colours: finance/ledger/categories.py PALETTE, one class each in app.css. */
  --cat-blue: #6e9bf5;
  --cat-orange: #f0a35e;
  --cat-green: #5fbf8f;
  --cat-yellow: #e3c35a;
  --cat-pink: #e58ab6;
  --cat-purple: #a98bef;
  --cat-teal: #4fb5c2;
  --cat-red: #e8796b;
  --cat-olive: #a9b86a;
  --cat-grey: #8b939c;

  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 26px;
  --text-2xl: 34px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-card: 14px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --target: 44px; /* smallest click target */
  --sidebar-width: 248px;
  --content-width: 1180px;
}