/* ============================================================
DESIGN TOKENS. Single source of truth for the palette.
Extracted from styles.css on 2026-08-06 so that this site and
CompoundPath can share one file instead of two copies of the same
values. They had already drifted apart once, which is the whole
reason this exists.
LOAD ORDER MATTERS. Every page links this BEFORE styles.css:
Two link tags rather than an @import, because @import serialises:
the browser cannot discover it until styles.css has been fetched
and parsed. Two links download in parallel and still apply in
document order.
NOT IN HERE: the @media print override of --bg, --ink and friends.
That is print behaviour rather than the palette and lives beside
the print rules it belongs to, at the end of styles.css.
THE DIRECTION IS AN ALMANAC, not an app. Warm paper rather than a
cold wash, warm near-black ink rather than navy, hairline rules
rather than floating cards, tight radii rather than pill corners.
Three colours carry MEANING and cannot be spent on brand: green is
money, amber is a warning, red is a loss. That is what makes
Prussian blue the brand colour. Blue is the one hue this system
never spends on meaning, and it is what a ledger was ruled in.
Every pair here is contrast-checked in both themes before it ships.
============================================================ */
:root {
/* ---- paper and ink ---- */
--ink: #221c16; /* warm near-black, not navy */
--ink-soft: #4a4038;
--ink-faint: #675c51; /* must clear 4.5 on --line-soft */
--money-text: #0a5940; /* green dark enough for body text; --money stays for fills */
--line: #ddd2c0; /* borders / gridlines */
--line-soft: #ece4d6;
/* Text fields sit on --surface inside a card that is also --surface, so the
border is the only thing that says "this is a control". WCAG 1.4.11 wants
3:1 for that, and --line is a divider colour well under it. --line is left
alone for rules and gridlines, where a hairline is the point. */
--line-strong:#8c8172;
--bg: #f6f1e7; /* warm paper */
--surface: #fffdf8; /* cards */
--surface-2: #f4eee2;
--primary: #1b4a6b; /* Prussian blue, brand / actions */
--primary-600:#163a53; /* text weight: must clear 4.5 on --primary-100 */
--primary-100:#e3edf4;
--link: #163a53;
--link-hover: #0e2637;
--money: #0d6b4f; /* green, interest / gains */
--money-100: #d9ece1;
/* Solid badge fills. --money and --danger are tuned for chart series and
borders, and are too light to carry white text at AA. These are the
readable counterparts; --on-fill flips to dark ink in the dark theme,
where every brand color lightens. */
--on-fill: #fffdf8;
--fill-money: #0a5940;
--fill-danger:#8a2018; /* also the danger text that stays readable on --danger-bg */
--contrib: #1b4a6b; /* contributions series */
--warn: #b0730f;
--amber: #b0730f; /* interest / caution series */
--amber-strong:#8a5709; /* amber that stays readable as text */
--danger: #a91f1f;
--danger-bg: #fbeeec;
--danger-border:#e3b4ad;
/* Themed surfaces that invert (tooltip + dark CTA sit on --ink in light mode) */
--tooltip-bg: #221c16;
--tooltip-fg: #fffdf8;
--cta-bg: #221c16;
--cta-fg: #fffdf8;
--cta-fg-soft: rgba(255,253,248,.74);
--header-bg: rgba(246,241,231,.86);
--dot-ring: #fffdf8; /* ring around chart hover dots */
/* Callouts */
--ok-bg: #dcece2;
--ok-border: #b9d6c6;
--ok-text: #0b5540;
--ok-text-strong: #08402f;
--bad-bg: #fbeeec;
--bad-border: #e8c3bc;
--bad-text: #8a2018;
--bad-text-strong: #6f1a13;
/* ---- SHADOWS ARE ALMOST GONE ----
An almanac has printed rules, not floating cards. What was three levels of
soft shadow is now one hairline and a whisper, and most surfaces get a
border instead. This is most of why the page stops reading as a dashboard.
(--shadow-md and --shadow-lg were undefined until 2026-08-03: a $1
backreference ate both token names during tokenization, leaving two invalid
declarations and five rules pointing at variables that did not exist.) */
--shadow-sm: 0 1px 0 rgba(34,28,22,.05);
--shadow-md: 0 1px 0 rgba(34,28,22,.06), 0 2px 6px rgba(34,28,22,.05);
--shadow-lg: 0 12px 32px -16px rgba(34,28,22,.28);
--rule: 1px solid var(--line);
/* Tight, because 16px corners are the single most recognisable tell of the
look this is moving away from. */
--radius: 6px;
--radius-sm: 4px;
/* Honest about what is actually installed. The old stack named Inter and this
project ships no font file, has no @font-face, and sends font-src 'self'.
Inter had never once rendered here: every page has been drawing in Segoe UI
on Windows and Roboto on a Chromebook. */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
--mono: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
--maxw: 1160px;
/* Chart palette. Added 2026-07-30 so a restyle reaches the charts.
Every value below was already in the stylesheet as a raw hex; these are
the same colours, named. Dark variants live in the dark block. */
--chart-1 : #1b4a6b; /* Prussian blue, the primary series */
--chart-2 : #0d6b4f; /* green, positive or supply */
--chart-3 : #a91f1f; /* red, loss or deadweight */
--chart-4 : #2f6f6a; /* teal, the second country or asset */
--chart-5 : #6a4c6d; /* plum, marginal revenue */
--chart-1-text : #163a53; /* label on a blue region */
--chart-2-text : #0a5940; /* label on a green region */
--chart-3-text : #8a2018; /* label on a red region */
--chart-amber-text : #8a5709; /* label on an amber region */
--chart-amber : #b0730f; /* amber series. No dark variant on purpose: the
matching chart lines do not adapt either. See stage C. */
--chart-neutral : #8a7f70; /* greyed-out series */
--chart-6 : #2f6f6a; /* teal, a categorical series */
--chart-7 : #b0730f; /* ochre, a categorical series */
--chart-slate : #8a7f70; /* muted category */
--chart-muted : #e3dac8; /* unbudgeted or remainder fill */
/* ---- restyle handles, added 2026-07-31 ----
These exist so a direction change is a token edit rather than a sweep. */
--font-display : "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Georgia, "Noto Serif", "Liberation Serif", serif;
--border-w : 1px; /* card and control border weight */
/* Per-card brand colours, previously 70 inline hex values across 3 pages. */
--card-1 : #1b4a6b;
--card-1-tint : #e3edf4;
--card-2 : #0d6b4f;
--card-2-tint : #d9ece1;
--card-3 : #96610c;
--card-3-tint : #f4e7cd;
--card-4 : #6a4c6d;
--card-4-tint : #ece2ee;
--card-5 : #8a5230;
--card-5-tint : #f3e5d8;
--card-6 : #1b4a6b;
--card-6-tint : #e3edf4;
--card-7 : #0d6b4f;
--card-7-tint : #d9ece1;
--card-8 : #96610c;
--card-8-tint : #f4e7cd;
--card-9 : #6a4c6d;
--card-9-tint : #ece2ee;
--card-10 : #8a5230;
--card-10-tint : #f3e5d8;
--card-11 : #1b4a6b;
--card-11-tint : #e3edf4;
--card-12 : #0d6b4f;
--card-12-tint : #d9ece1;
--card-13 : #96610c;
--card-13-tint : #f4e7cd;
--card-14 : #6a4c6d;
--card-14-tint : #ece2ee;
--card-15 : #8a5230;
--card-15-tint : #f3e5d8;
--card-4-tint-b : #ece2ee; /* alternate tint used on two investment cards */
--card-2-tint-b : #d9ece1; /* alternate tint used on one leasing card */
}
:root[data-theme="dark"] {
/* Dark is not the light theme inverted. It is the same paper at night: warm
charcoals rather than blue-black, so the two themes read as one object under
different light rather than as two products. */
--money-text: #6ee0ac; /* dark: --money already passes as text */
--ink: #f0e9dd;
--ink-soft: #c8bcab;
--ink-faint: #a2957f;
--line: #3b332a;
--line-soft: #29231c;
--line-strong:#786c5c;
--bg: #17130f;
--surface: #211b15;
--surface-2: #2b241c;
/* Prussian blue cannot survive on a dark ground at text weight, so the brand
lifts to the pale blue it would wash out to. Same colour, more light, and
still cool against the warm charcoals. */
--primary: #8fc0dd;
--primary-600:#b0d4ea;
--primary-100:#16303f;
--link: #8fc0dd;
--link-hover: #c9e3f2;
--money: #4ecf9a;
--money-100: #0c3b2b;
--on-fill: #17130f; /* fills lighten in dark mode, so the glyph goes dark */
--fill-money: #4ecf9a;
--fill-danger:#f0a79c;
--contrib: #8fc0dd;
--warn: #f0c063;
--amber: #f0c063;
--amber-strong:#f0c063;
--danger: #f08a80;
--danger-bg: #3d1a16;
--danger-border:#7a2b23;
--tooltip-bg: #3b332a;
--tooltip-fg: #f0e9dd;
--cta-bg: #2b241c;
--cta-fg: #f0e9dd;
--cta-fg-soft: rgba(240,233,221,.75);
--header-bg: rgba(33,27,21,.88);
--dot-ring: #211b15;
--ok-bg: #0f3c2c;
--ok-border: #1d6b4f;
--ok-text: #7fe3b5;
--ok-text-strong: #aef0d0;
--bad-bg: #3a1815;
--bad-border: #7a2b23;
--bad-text: #f0a79c;
--bad-text-strong: #f7c7c0;
--shadow-sm: 0 1px 0 rgba(0,0,0,.40);
--shadow-md: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
--shadow-lg: 0 12px 32px -16px rgba(0,0,0,.7);
/* chart palette, dark */
--chart-1 : #8fc0dd;
--chart-2 : #4ecf9a;
--chart-3 : #f08a80;
--chart-4 : #7fc4bc;
--chart-5 : #c3a0c8;
--chart-1-text : #b0d4ea;
--chart-2-text : #6ee0ac;
--chart-3-text : #f0a79c;
--chart-amber-text : #f0c063;
--chart-6 : #7fc4bc;
--chart-7 : #f0c063;
--chart-slate : #a2957f;
--chart-muted : #3b332a;
--chart-amber : #f0c063;
--chart-neutral : #a2957f;
--card-1 : #8fc0dd;
--card-1-tint : #16303f;
--card-2 : #4ecf9a;
--card-2-tint : #0c3b2b;
--card-3 : #e0b25e;
--card-3-tint : #3b2f16;
--card-4 : #c3a0c8;
--card-4-tint : #2f2334;
--card-5 : #d59a72;
--card-5-tint : #3a271b;
--card-6 : #8fc0dd;
--card-6-tint : #16303f;
--card-7 : #4ecf9a;
--card-7-tint : #0c3b2b;
--card-8 : #e0b25e;
--card-8-tint : #3b2f16;
--card-9 : #c3a0c8;
--card-9-tint : #2f2334;
--card-10 : #d59a72;
--card-10-tint : #3a271b;
--card-11 : #8fc0dd;
--card-11-tint : #16303f;
--card-12 : #4ecf9a;
--card-12-tint : #0c3b2b;
--card-13 : #e0b25e;
--card-13-tint : #3b2f16;
--card-14 : #c3a0c8;
--card-14-tint : #2f2334;
--card-15 : #d59a72;
--card-15-tint : #3a271b;
--card-4-tint-b : #2f2334;
--card-2-tint-b : #0c3b2b;
}