/* Ledger Emerald — design tokens (see RECEIPTS_PLAN.md → Design).
   Light is default; dark via [data-theme="dark"] or system preference when
   no explicit choice ([data-theme] absent/"system"). */

:root {
  color-scheme: light;
  /* canvas + surfaces */
  --bg: #F5F6F4;
  --surface: #FFFFFF;
  --surface-2: #EEF0ED;
  --border: rgba(11, 15, 14, 0.09);
  /* text */
  --text-1: #141917;
  --text-2: #5A625E;
  --text-3: #8A928D;
  /* brand + semantic */
  --primary: #047857;
  --on-primary: #FFFFFF;
  --primary-soft: #D1FAE5;
  --success: #047857;
  --warning: #B45309;
  --danger: #DC2626;
  /* entities */
  --business: #047857;
  --business-soft: #D1FAE5;
  --personal: #6D28D9;
  --personal-soft: #EDE9FE;
  /* category ramp (fixed slots 1-8) */
  --cat-1: #1BAF7A; --cat-2: #2A78D6; --cat-3: #EDA100; --cat-4: #008300;
  --cat-5: #E34948; --cat-6: #4A3AA7; --cat-7: #EB6834; --cat-8: #E87BA4;
  /* elevation (light only; dark uses surface steps) */
  --shadow-card: 0 1px 2px rgba(11,15,14,.05), 0 4px 12px rgba(11,15,14,.06);
  /* shape + spacing */
  --r-card: 16px; --r-input: 12px; --r-chip: 10px;
  --gutter: 16px;
  /* type scale */
  --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 22px;
  --fs-body: 17px; --fs-sec: 13px; --fs-label: 11px;
  --fs-hero: 42px;
}

[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"], :root[data-theme="dark"] {
  --bg: #0B0F0E;
  --surface: #161B19;
  --surface-2: #1F2522;
  --border: rgba(255, 255, 255, 0.09);
  --text-1: #F2F4F2;
  --text-2: #A7B0AB;
  --text-3: #6E7873;
  --primary: #34D399;
  --on-primary: #0B0F0E;
  --primary-soft: rgba(52, 211, 153, 0.14);
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --business: #34D399;
  --business-soft: rgba(52, 211, 153, 0.14);
  --personal: #A78BFA;
  --personal-soft: rgba(167, 139, 250, 0.16);
  --cat-1: #199E70; --cat-2: #3987E5; --cat-3: #C98500; --cat-4: #008300;
  --cat-5: #E66767; --cat-6: #9085E9; --cat-7: #D95926; --cat-8: #D55181;
  --shadow-card: none;
}

/* System preference applies only when the user hasn't forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0B0F0E; --surface: #161B19; --surface-2: #1F2522;
    --border: rgba(255,255,255,0.09);
    --text-1: #F2F4F2; --text-2: #A7B0AB; --text-3: #6E7873;
    --primary: #34D399; --on-primary: #0B0F0E;
    --primary-soft: rgba(52,211,153,0.14);
    --success: #34D399; --warning: #FBBF24; --danger: #F87171;
    --business: #34D399; --business-soft: rgba(52,211,153,0.14);
    --personal: #A78BFA; --personal-soft: rgba(167,139,250,0.16);
    --cat-1: #199E70; --cat-2: #3987E5; --cat-3: #C98500; --cat-4: #008300;
    --cat-5: #E66767; --cat-6: #9085E9; --cat-7: #D95926; --cat-8: #D55181;
    --shadow-card: none;
  }
}

/* fonts: Inter variable, self-hosted */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}