/* Fonts, colour tokens for the dark (default) and light themes, keyboard focus.
   Tokens only: nothing here lays anything out.

   BEFORE CHANGING A SPACING TOKEN HERE, read "Tokens" in docs/visual-language.md:
   `--card-pad` is the padding contract every card on the list in that section
   keeps, and `test/layout-tokens.test.js` fails the build when one does not.

   BEFORE CHANGING A COLOUR HERE, read "Colour means one thing" in
   docs/visual-language.md. The short version: the app has three meanings — money in,
   money out, what you hold — and each is one hue at two weights. The plain token is
   text and clears 4.5:1; the --chart- token is the mark and clears 3:1. Every value
   below was solved against every surface in both themes, not picked by eye, and
   gui/test/colour.test.js measures all of it — nudge a hex and it will tell you which
   pair it broke and by how much. A token added to one theme and not the other is the
   bug this whole file was rewritten to kill. */
/* Local variable fonts: Quicksand for UI text, Heebo for description text
   (and as per-glyph fallback for Hebrew, which Quicksand lacks).
   WOFF2 rather than TTF — same glyphs, same `wght` axis, 244KB down to 115KB.
   Both keep the full variable axis, which the weight ranges below depend on:
   the stylesheet asks for 500 and 600, weights no static cut would carry.
   `format('woff2')` covers variable WOFF2 too — the older `woff2-variations`
   hint is non-standard and some engines reject the whole src list over it. */
@font-face{
  font-family:'Quicksand';
  src:url('../fonts/Quicksand[wght].woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Heebo';
  src:url('../fonts/Heebo[wght].woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}
/* Money in, money out, and what you hold: the app has three meanings and each one
   is a single hue at two weights. The plain token is the text value — it clears
   4.5:1 on every surface and on its own tint, which is what a 14px/600 amount
   needs. The --chart- value is the same hue carried deeper, for a mark that only
   has to clear 3:1. Before this the two jobs shared one token, so the figure the
   app prints most (an expense amount) sat at 3.29:1 inside a tooltip. */
:root{
  --bg:#0A0C10;
  --surface:#1B1F26;
  --surface2:#21262E;
  --surface3:#262B33;
  --tile:#242931;
  --tile-edge:rgba(255,255,255,0.06);
  --border:#2E333D;
  --border-hover:#434A56;
  --text:#E9EBEF;
  --muted:#9AA3B2;
  --input-bg:#21262E;
  --sidebar-bg:#12151A;
  /* The three meanings. --accent is the balance: the one thing on screen that is
     neither money in nor money out, so it also carries the primary action and the
     focus ring rather than being a fourth colour with no meaning. */
  --pos:#00A94D;
  --neg:#FF5754;
  --accent:#C18700;
  --accent-deep:#9B6C00;
  /* The filled button. Gold is intrinsically light, so darkening it far enough to
     carry white text pushes it to olive — which is what --accent-deep does and why
     the button read as brown. This keeps the gold bright and puts near-black on it
     instead. Both values are the same in either theme on purpose: the fill does not
     flip, so its label must not either. */
  --accent-bright:#EFA800;
  --accent-bright-ink:#16181D;
  /* Three supporting hues for labels that must be told apart without meaning
     anything (recurring-rule frequency tags, trend legends). They sit on the
     category wheel so nothing on screen is a colour that exists nowhere else,
     but they are set one notch lighter than their category twin because these
     are text and a category swatch is a mark. */
  --violet:#5D8DFF;
  --teal:#00A1C3;
  --orange:#FF7C4C;
  /* Chart marks, named by what they mean rather than by hue, so every chart draws
     one meaning in one colour and the light theme can differ. */
  --chart-pos:#00873C;
  --chart-neg:#EA0027;
  --chart-balance:#9B6C00;
  --chart-committed:#9B6C00;
  --chart-discretionary:#5989FF;
  --chart-neutral:#788293;
  --chart-warn:#FF7C4C;
  --chart-grid:rgba(255,255,255,0.06);
  /* Veils, not palette colours: a scrim recedes what is behind it, so it stays a
     dark wash on both themes rather than flipping with them. --scrim-strong is the
     Guide's spotlight, which has to push its surroundings further back. Defined in
     :root only, deliberately — these two are the one place a theme does not apply. */
  --scrim:rgba(5,5,12,0.62);
  --scrim-strong:rgba(2,3,8,0.78);
  /* Tints are written out rather than mixed from an alpha, because an alpha wash
     lightens the ground under the text sitting on it: at 13% over --surface the
     coloured text on a chip dropped to 3.9:1. Each of these is the darkest ground
     its own token still reads 4.6:1 against. */
  --tint-green:#172F1D;
  --tint-red:#431F1D;
  --tint-amber:#36270E;
  --tint-violet:#1E2943;
  --tint-teal:#03303B;
  --tint-orange:#4F3025;
  /* Radius, one per role: a control, a card, a card that groups cards, a pill. */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:14px;
  --radius-pill:999px;
  /* Type scale — six steps, weights 400 / 500 / 600 only (visual-language.md). */
  --fs-display:1.75rem;
  --fs-figure:1.125rem;
  --fs-body:.875rem;
  --fs-label:.8125rem;
  --fs-meta:.75rem;
  --fs-micro:.6875rem;
  /* Spacing — 4px grid. */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --card-pad:var(--sp-4);
  --card-gap:var(--sp-3);
  --page-max:clamp(1640px,92vw,2560px);
  --page-gutter:var(--sp-4);
  --split-gap:var(--sp-4);
  --section-gap:var(--sp-4);
  --rail-min:14rem;
  --rail-max:22.5rem;
  --dash-gap:var(--sp-4);
  --card-wide:1100px;
  --topbar-h:67px;
  --elev:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.6),0 6px 18px -6px rgba(0,0,0,.7);
  --elev-hover:inset 0 0 0 1px rgba(255,255,255,.11),0 2px 6px rgba(0,0,0,.6),0 14px 30px -12px rgba(0,0,0,.8);
  --hover-dur:.28s;
  --hover-ease:cubic-bezier(.22,1,.36,1);
  --hover-pill-bg:var(--surface2);
  --hover-pill-bg-deep:var(--surface3);
  --sidebar-w:9.5rem;
  --titlebar-h:2.875rem;
  /* What the macOS traffic lights cover at the top left of the window: in a
     right-to-left page the sidebar moves right and the topbar runs under them. */
  --traffic-lights-w:4.75rem;
}
/* Light theme. Surfaces climb instead of descending, and every colour is the same
   hue at a much lower lightness — a value bright enough to read on near-black is
   invisible on white, which is the mistake the first light theme made. */
:root[data-theme="light"]{
  --bg:#F5F5F6;
  --surface:#FFFFFF;
  --surface2:#F1F2F4;
  --surface3:#E7E9EC;
  --tile:#EAEDF1;
  --tile-edge:rgba(22,24,29,0.08);
  --border:#E6E7EA;
  --border-hover:#C9CDD4;
  --text:#16181D;
  --muted:#5D6675;
  --input-bg:#FFFFFF;
  --sidebar-bg:#FFFFFF;
  --pos:#007936;
  --neg:#D30022;
  --accent:#8C6000;
  --accent-deep:#6E4B00;
  --accent-bright:#EFA800;
  --accent-bright-ink:#16181D;
  --violet:#3C46C4;
  --teal:#00728C;
  --orange:#9B3300;
  /* On white a legible colour is already a good mark, so text and mark are one
     value here; only the dark theme has to split them. */
  --chart-pos:#007936;
  --chart-neg:#D30022;
  --chart-balance:#8C6000;
  --chart-committed:#8C6000;
  --chart-discretionary:#3C46C4;
  --chart-neutral:#5D6675;
  --chart-warn:#9B3300;
  --chart-grid:rgba(16,24,40,0.07);
  --tint-green:#D8F2DC;
  --tint-red:#FFE5E2;
  --tint-amber:#FAE9CE;
  --tint-violet:#BFCEEC;
  --tint-teal:#C9F1FE;
  --tint-orange:#EAC6B9;
  --elev:0 1px 2px rgba(16,18,24,.05),0 1px 3px rgba(16,18,24,.04);
  --elev-hover:0 2px 6px rgba(16,18,24,.08),0 12px 26px -14px rgba(16,18,24,.18);
  --hover-dur:.28s;
  --hover-ease:cubic-bezier(.22,1,.36,1);
  --hover-pill-bg:var(--surface2);
  --hover-pill-bg-deep:var(--surface3);
}
/* Layout density — compact values live in :root above; split and wide tiers here. */
@media (min-width:1150px){
  :root{
    --page-gutter:var(--sp-5);
    --split-gap:var(--sp-5);
    --section-gap:var(--sp-5);
    --rail-min:18rem;
    --rail-max:24rem;
    --dash-gap:1.125rem;
  }
}
@media (min-width:1600px){
  :root{
    --page-gutter:var(--sp-6);
    --split-gap:var(--sp-5);
    --section-gap:var(--sp-5);
    --rail-min:20rem;
    --rail-max:26rem;
    --dash-gap:1.125rem;
  }
}
/* Keyboard focus is otherwise invisible: several controls set outline:none, and
   the browser default ring disappears against these surfaces. :focus-visible so
   mouse users never see it. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
html{overflow-y:scroll;scrollbar-gutter:stable;}
input,select,textarea,button{font-family:inherit;}