/* ============================================================
   LEDGER DESIGN TOKENS v1.1 — warm paper · indigo ink
   Source of truth: design/ledger-design-system.html
   Keep this file in lockstep with that document.
   ============================================================ */
:root {
  --bg: #F6F5F2;
  --surface: #FFFFFF;
  --surface-sunken: #FAF9F6;
  --surface-raised: #FFFFFF;
  --border: #E7E4DD;
  --border-strong: #D8D4CB;
  --ring: rgba(90, 87, 216, 0.3);
  --content: #23252B;
  --content-2: #5A5C64;
  --content-3: #949AA3;
  --accent: #5A57D8;
  --accent-strong: #4A47C0;
  --accent-soft: #ECECFB;
  --accent-border: #D6D5F3;
  --on-accent: #FFFFFF;
  --success: #0B8A57;
  --success-soft: #E3F6EC;
  --warning: #B45309;
  --warning-soft: #FDEFCB;
  --danger: #D22F2A;
  --danger-soft: #FBE3E1;
  --info: #2563EB;
  --info-soft: #EAF1FE;
  --held: #C63D8F;
  --held-soft: #FBE7F2;
  --chart-1: #5A57D8;
  --chart-2: #2563EB;
  --chart-3: #D97706;
  --chart-4: #C63D8F;
  --chart-5: #CFCCC4;
  --font-ui: "Instrument Sans", "Noto Sans", "Noto Sans Arabic", sans-serif;
  --font-mono: "Spline Sans Mono", monospace;
  --r-ctl: 7px;
  --r-card: 12px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(35, 37, 43, 0.06);
  --sh-2: 0 1px 2px rgba(35, 37, 43, 0.05), 0 6px 16px rgba(35, 37, 43, 0.07);
  --sh-pop: 0 2px 8px rgba(35, 37, 43, 0.08), 0 20px 48px rgba(35, 37, 43, 0.18);
}

html.dark {
  --bg: #121114;
  --surface: #191821;
  --surface-sunken: #141317;
  --surface-raised: #201F27;
  --border: #2A2832;
  --border-strong: #3E3B48;
  --ring: rgba(133, 130, 236, 0.38);
  --content: #F4F4F5;
  --content-2: #A4A4AD;
  --content-3: #6B6B74;
  --accent: #8582EC;
  --accent-strong: #A3A0F2;
  --accent-soft: rgba(133, 130, 236, 0.13);
  --accent-border: rgba(133, 130, 236, 0.32);
  --on-accent: #15143E;
  --success: #3CC98A;
  --success-soft: rgba(60, 201, 138, 0.12);
  --warning: #F5A524;
  --warning-soft: rgba(245, 165, 36, 0.12);
  --danger: #F26B66;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, 0.12);
  --held: #F26BB8;
  --held-soft: rgba(242, 107, 184, 0.14);
  --chart-1: #8582EC;
  --chart-2: #60A5FA;
  --chart-3: #E9A13B;
  --chart-4: #F26BB8;
  --chart-5: #403D48;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.5);
  --sh-pop: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 52px rgba(0, 0, 0, 0.65);
}