/* ============================================================
   StartFinance — Design tokens
   "The Ledger": an editorial financial-statement system with
   real, tactile depth — not flat, not bubble-app rounded.
   ============================================================ */
:root{
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Instrument Sans', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:14px;

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);

  --gold:#c9a24b;
  --gold-soft:#e4c680;
  --emerald:#3f9d6d;
  --emerald-soft:#7fd4a6;
  --garnet:#c1553f;
  --garnet-soft:#e8917c;
  --sapphire:#4c7ea8;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px;
}

/* ---------- Dark: "Ink" (default) ---------- */
:root,
[data-theme="ink"]{
  --bg:#0a0908;
  --bg-grid:rgba(201,162,75,.045);
  --surface:#141210;
  --surface-2:#1a1714;
  --surface-3:#211d18;
  --raised:#1c1814;
  --border:rgba(232,220,196,.09);
  --border-strong:rgba(232,220,196,.20);
  --text:#f3ecdf;
  --text-dim:#b8ac97;
  --text-faint:#7d7362;
  --accent:var(--gold);
  --accent-soft:rgba(201,162,75,.16);
  --accent-contrast:#161208;
  --pos:var(--emerald-soft);
  --pos-bg:rgba(63,157,109,.15);
  --neg:var(--garnet-soft);
  --neg-bg:rgba(193,85,63,.16);
  --shadow-xs:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --shadow-2:0 20px 48px rgba(0,0,0,.55);
  --glow-accent:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--gold) 30%, transparent);
  --scrim:rgba(6,5,4,.75);
  color-scheme: dark;
}

/* ---------- Light: "Parchment" ---------- */
[data-theme="parchment"]{
  --bg:#f2e9d6;
  --bg-grid:rgba(60,45,20,.05);
  --surface:#fbf6ea;
  --surface-2:#f6efdf;
  --surface-3:#efe6d2;
  --raised:#fffdf8;
  --border:rgba(60,45,20,.11);
  --border-strong:rgba(60,45,20,.22);
  --text:#231d13;
  --text-dim:#5c5138;
  --text-faint:#8a7c5c;
  --accent:#96702a;
  --accent-soft:rgba(150,112,42,.14);
  --accent-contrast:#fffaf0;
  --pos:#276b48;
  --pos-bg:rgba(39,107,72,.12);
  --neg:#a13f28;
  --neg-bg:rgba(161,63,40,.12);
  --shadow-xs:0 1px 2px rgba(60,45,20,.06);
  --shadow-sm:0 1px 2px rgba(60,45,20,.06), 0 3px 8px rgba(60,45,20,.07);
  --shadow-md:0 2px 6px rgba(60,45,20,.07), 0 10px 22px rgba(60,45,20,.09);
  --shadow-lg:0 8px 20px rgba(60,45,20,.10), 0 24px 48px rgba(60,45,20,.14);
  --shadow-2:0 24px 56px rgba(60,45,20,.2);
  --glow-accent:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 3px 10px color-mix(in srgb, var(--accent) 25%, transparent);
  --scrim:rgba(35,29,19,.5);
  color-scheme: light;
}

/* ---------- Slate variant (alt dark, cooler) ---------- */
[data-theme="slate"]{
  --bg:#0a0d12;
  --bg-grid:rgba(150,180,210,.045);
  --surface:#12161d;
  --surface-2:#171c24;
  --surface-3:#1d232c;
  --raised:#181d25;
  --border:rgba(210,222,235,.08);
  --border-strong:rgba(210,222,235,.18);
  --text:#eaf0f6;
  --text-dim:#9fb0c2;
  --text-faint:#66788c;
  --accent:#7fb2e0;
  --accent-soft:rgba(127,178,224,.16);
  --accent-contrast:#0a1622;
  --pos:#68c99a;
  --pos-bg:rgba(104,201,154,.15);
  --neg:#e2836f;
  --neg-bg:rgba(226,131,111,.16);
  --shadow-xs:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --shadow-2:0 20px 48px rgba(0,0,0,.55);
  --glow-accent:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  --scrim:rgba(4,6,9,.75);
  color-scheme: dark;
}