/* ============================================================================
KIRGA — TOKEN SYSTEM
The single source of colour, elevation and motion. Nothing below this file
may hardcode a colour literal; `tools/contrast-scan.js` fails the build on it.
THREE RULES, learned the hard way:
1. A tint and its ink are a PAIR. Never pick a tint in one theme and an ink
in another. Every `--m-*-tint` has a matching `--m-*-ink` guaranteed
>=4.5:1 against that tint AND against the surface it sits on.
2. FILLED surfaces do not flip with theme. A solid teal button is always
white-on-teal -- that is what `--m-*-fill` and `--on-fill` are for.
Flipping filled text with the theme is the commonest way these break.
3. Gold is the WIN colour: money recovered, nothing else. It is the hardest
hue to make accessible; `--m-gold-ink` is deepened hard on light and must
never be used on the warm paper surface.
==========================================================================*/
:root {
/* ---- type ------------------------------------------------------------ */
--font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Fraunces', 'DM Sans', Georgia, serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
/* ---- geometry -------------------------------------------------------- */
--r-1: 10px; --r-2: 16px; --r-3: 22px; --r-4: 28px; --r-pill: 999px;
--tap: 44px; --gut: 16px;
/* ---- motion ----------------------------------------------------------
Declared NOWHERE in this file. css/motion.css owns motion outright -- the
scale, the curves, the primitives, .no-arrive and the reduced-motion block
-- because a duration is meaningless without the policy that can zero it.
Six of those names were declared here too, with DIFFERENT values, so which
set the app got was decided by order alone. One owner now.
.kpi and .navblock::before below CONSUME var(--t-base)/var(--ease), which
is fine; declaring is not. A page loading this file without motion.css
gets no transition on those two -- app/terms.html does, and uses neither. */
/* Text on any FILLED (solid-hue) surface, in both themes. Never flips. */
--on-fill: #FFFFFF;
/* ---- filled gradients + their inks ------------------------------------
Theme-independent on purpose: a primary button is the same button in dark
and light, and flipping its label with the theme is how you end up with
white-on-teal at 3.17:1 in one mode and never notice. Both inks were solved
against BOTH gradient stops, not just the pretty one:
brand: #04201F on #35C0BB = 7.64 · on #27A6A6 = 5.76
gold : #3A2A05 on #EFC974 = 8.77 · on #DFB350 = 7.07
The previous teal failed at its dark end (4.10) and white on it was worse
(3.17), so the fix was to go BRIGHTER, not to swap the ink. */
--grad-brand: linear-gradient(180deg, #35C0BB, #27A6A6);
--on-brand: #04201F;
--grad-gold: linear-gradient(180deg, #EFC974, #DFB350);
--on-gold: #3A2A05;
--grad-brand-shadow: 0 6px 18px rgba(39,166,166,.34);
--grad-gold-shadow: 0 10px 26px rgba(223,179,80,.34);
/* The Money Story card is rendered to a shareable IMAGE, so it keeps one
fixed brand appearance in both themes -- a card that changed colour
depending on the sender's theme would be a strange thing to receive. */
--story-grad: radial-gradient(700px 340px at 84% -10%, #1A5A8E 0%, #0D2B4E 52%, #08203C 100%);
--story-ink: #F2F7FC;
--story-ink-2: #B6D4E4;
--story-gold: #F5CE71;
--story-line: rgba(255,255,255,.12);
}
/* ============================================================================
DARK — the default. Base is warmed slightly off pure navy so long sessions
feel lamp-lit rather than clinical.
==========================================================================*/
:root,
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #08182F;
--bg-warm: #0A1B31; /* warmed base for reading surfaces */
--bg-grad: radial-gradient(1250px 720px at 78% -10%, #16406E 0%, #0B2044 44%, #061428 100%);
--surface: #0E2C4F;
--surface-2: #133658;
--surface-3: #193F66;
--surface-hover: #1B4570;
--surface-sunken: #0A2140;
--ink: #F0F5FB;
--ink-2: #C2D4E8;
/* Solved, not guessed: 4.74:1 worst-case across every dark surface up to
--surface-hover. The previous #6E86A2 scored 3.03 and was single-handedly
responsible for 49 of 166 contrast failures. "Faint" is not a licence to
be unreadable. */
--ink-3: #A0B6D0;
--ink-inverse: #08182F;
--line: rgba(212,230,250,.11);
--line-2: rgba(212,230,250,.20);
--line-3: rgba(212,230,250,.32);
--scrim: rgba(3,11,26,.68);
--shadow-1: 0 1px 2px rgba(0,0,0,.30);
--shadow-2: 0 8px 28px rgba(0,0,0,.42);
--shadow-3: 0 20px 60px rgba(0,0,0,.56);
--glow: 0 0 0 1px rgba(255,255,255,.05), 0 10px 34px rgba(0,0,0,.45);
/* ---- metric families: fill / ink / tint / edge ------------------------
fill = solid (charts, buttons, bars) ink = text on --surface*
tint = soft card wash edge = tint's border */
/* teal-ink solved to 4.84:1 worst-case across every dark surface including
--surface-3 at #174C72, where #45C8C4 landed on 4.46 -- close enough to
pass a glance and fail a measurement. */
--m-teal-fill: #1B8A8A; --m-teal-ink: #4CD0CC;
--m-teal-tint: rgba(27,138,138,.16); --m-teal-edge: rgba(69,200,196,.30);
--m-mint-fill: #1FA97F; --m-mint-ink: #4FD8A6;
--m-mint-tint: rgba(31,169,127,.16); --m-mint-edge: rgba(79,216,166,.30);
--m-coral-fill: #E1584F; --m-coral-ink: #FF9088;
--m-coral-tint: rgba(225,88,79,.17); --m-coral-edge: rgba(255,144,136,.32);
--m-gold-fill: #C8992F; --m-gold-ink: #F5CE71;
--m-gold-tint: rgba(200,153,47,.17); --m-gold-edge: rgba(245,206,113,.32);
--m-violet-fill:#7C6CE0; --m-violet-ink:#AFA2FF;
--m-violet-tint:rgba(124,108,224,.18); --m-violet-edge: rgba(175,162,255,.32);
--m-indigo-fill:#4A7BD8; --m-indigo-ink:#8FB4FF;
--m-indigo-tint:rgba(74,123,216,.18); --m-indigo-edge: rgba(143,180,255,.32);
--m-amber-fill: #D9902C; --m-amber-ink: #F7BC63;
--m-amber-tint: rgba(217,144,44,.17); --m-amber-edge: rgba(247,188,99,.32);
--m-plum-fill: #B65BA8; --m-plum-ink: #EC9BDD;
--m-plum-tint: rgba(182,91,168,.17); --m-plum-edge: rgba(236,155,221,.32);
}
/* ============================================================================
LIGHT — cooler, crisper paper. Inks are deepened until each clears 4.5:1
on both --surface and its own tint.
==========================================================================*/
:root[data-theme="light"] {
color-scheme: light;
--bg: #EDF2F9;
--bg-warm: #F6F4F0; /* warm paper: landing / long reads */
--bg-grad: radial-gradient(1100px 640px at 82% -12%, #E2EDF9 0%, #EDF2F9 48%, #E5ECF6 100%);
--surface: #FFFFFF;
--surface-2: #F3F7FC;
--surface-3: #E8F0F9;
--surface-hover: #EDF4FC;
--surface-sunken:#E6EDF6;
--ink: #0C2035;
--ink-2: #37536F;
/* 5.04:1 worst-case down to --surface-sunken. Was #7089A4 at 3.48. */
--ink-3: #4E667F;
--ink-inverse: #FFFFFF;
--line: rgba(12,32,53,.12);
--line-2: rgba(12,32,53,.20);
--line-3: rgba(12,32,53,.32);
--scrim: rgba(10,24,44,.44);
--shadow-1: 0 1px 2px rgba(16,40,70,.08);
--shadow-2: 0 8px 26px rgba(16,40,70,.12);
--shadow-3: 0 20px 56px rgba(16,40,70,.18);
--glow: 0 0 0 1px rgba(16,40,70,.06), 0 10px 30px rgba(16,40,70,.12);
/* Inks deepened for AA on white AND on their own pale tint. */
--m-teal-fill: #12797A; --m-teal-ink: #0B5F60;
--m-teal-tint: rgba(18,121,122,.11); --m-teal-edge: rgba(18,121,122,.26);
--m-mint-fill: #12805F; --m-mint-ink: #0A6349;
--m-mint-tint: rgba(18,128,95,.11); --m-mint-edge: rgba(18,128,95,.26);
--m-coral-fill: #CC4238; --m-coral-ink: #A62C24;
--m-coral-tint: rgba(204,66,56,.10); --m-coral-edge: rgba(204,66,56,.26);
--m-gold-fill: #A97C1E; --m-gold-ink: #78560D;
--m-gold-tint: rgba(169,124,30,.13); --m-gold-edge: rgba(169,124,30,.28);
--m-violet-fill:#6355C4; --m-violet-ink:#4A3D9E;
--m-violet-tint:rgba(99,85,196,.10); --m-violet-edge: rgba(99,85,196,.26);
--m-indigo-fill:#2F5FBC; --m-indigo-ink:#1F4894;
--m-indigo-tint:rgba(47,95,188,.10); --m-indigo-edge: rgba(47,95,188,.26);
--m-amber-fill: #B4741C; --m-amber-ink: #85520B;
--m-amber-tint: rgba(180,116,28,.12); --m-amber-edge: rgba(180,116,28,.28);
--m-plum-fill: #9C4290; --m-plum-ink: #7A2E70;
--m-plum-tint: rgba(156,66,144,.10); --m-plum-edge: rgba(156,66,144,.26);
}
/* ============================================================================
SEMANTIC ALIASES — modules speak meaning, not hue. Rehue in one place.
==========================================================================*/
:root {
--brand: var(--m-teal-fill);
--brand-ink: var(--m-teal-ink);
--brand-soft: var(--m-teal-tint);
--brand-edge: var(--m-teal-edge);
--credit: var(--m-mint-fill); /* money in */
--credit-ink: var(--m-mint-ink);
--credit-soft: var(--m-mint-tint);
--debit: var(--m-coral-fill); /* money out */
--debit-ink: var(--m-coral-ink);
--debit-soft: var(--m-coral-tint);
--danger: var(--m-coral-fill);
--danger-ink: var(--m-coral-ink);
--danger-soft: var(--m-coral-tint);
--warn: var(--m-amber-fill);
--warn-ink: var(--m-amber-ink);
--warn-soft: var(--m-amber-tint);
--gold: var(--m-gold-fill); /* WON money only */
--gold-ink: var(--m-gold-ink);
--gold-soft: var(--m-gold-tint);
--violet: var(--m-violet-fill);
--violet-ink: var(--m-violet-ink);
--violet-soft: var(--m-violet-tint);
/* module accents — drive KPI tints and the colour-blocked nav */
--acc-view: var(--m-teal-fill);
--acc-coach: var(--m-violet-fill);
--acc-budget: var(--m-indigo-fill);
--acc-goals: var(--m-mint-fill);
--acc-ajo: var(--m-indigo-fill);
--acc-guard: var(--m-coral-fill);
--acc-insight: var(--m-plum-fill);
--acc-learn: var(--m-amber-fill);
}
/* ============================================================================
KPI CARDS — softly tinted per metric. Add `.kpi` plus a `.m-`.
The tint is the card wash; the value takes the matching ink.
==========================================================================*/
.kpi {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-2);
padding: 14px 16px;
overflow: hidden;
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.kpi::before { /* the soft tint wash */
content: ''; position: absolute; inset: 0;
background: var(--kpi-tint, transparent);
pointer-events: none;
}
.kpi::after { /* the colour block spine */
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--kpi-fill, transparent);
border-radius: var(--r-2) 0 0 var(--r-2);
}
/* min-width:0 because `overflow:hidden` above zeroes the automatic minimum
size of the CARD but not of what is inside it: a flex child holding a naira
figure would otherwise refuse to be narrower than the whole unbreakable
string and push the figure under the clip. */
.kpi > * { position: relative; min-width: 0; }
/* Guarded, not deleted. A touch device fires :hover on tap and keeps it until
you touch something else, so the card the reviewer poked stays lifted — it
reads as stuck UI. Trackpad and mouse users still get the lift. */
@media (hover:hover) and (pointer:fine){
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.kpi .kpi-label { color: var(--ink-2); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
/* THE FIGURE IS NEVER CUT. `overflow:hidden` on the card silently ate whatever
did not fit, and a naira amount has no break opportunity in it — so at 320px
the three-up row on HOME painted "₦695" where the ledger said ₦695,500, and
"₦520" where it said ₦520,000, with no ellipsis to say anything was missing.
A truncated money figure still reads as a finished number; it is the one
failure this app cannot have. Two rules stand between the value and the clip:
the grid gives it a box wide enough on a phone (see .grid-3 in kirga.css),
and overflow-wrap lets it take a second LINE if a figure ever outgrows even
that. Wrapping is ugly; losing a digit is a lie.
--kpi-size is how a module asks for a size other than 26px. It exists because
the modules used to hard-code `style="font-size:19px"`, which no stylesheet
can answer — an inline declaration wins — so no responsive rule here could
ever reach the tiles that were being cut. */
.kpi .kpi-value {
color: var(--kpi-ink, var(--ink));
font-family: var(--font-display);
font-size: var(--kpi-size, 26px);
line-height: 1.1;
overflow-wrap: anywhere;
}
.kpi .kpi-foot { color: var(--ink-3); font-size: 12px; }
.m-teal { --kpi-tint: var(--m-teal-tint); --kpi-ink: var(--m-teal-ink); --kpi-fill: var(--m-teal-fill); }
.m-mint { --kpi-tint: var(--m-mint-tint); --kpi-ink: var(--m-mint-ink); --kpi-fill: var(--m-mint-fill); }
.m-coral { --kpi-tint: var(--m-coral-tint); --kpi-ink: var(--m-coral-ink); --kpi-fill: var(--m-coral-fill); }
.m-gold { --kpi-tint: var(--m-gold-tint); --kpi-ink: var(--m-gold-ink); --kpi-fill: var(--m-gold-fill); }
.m-violet { --kpi-tint: var(--m-violet-tint); --kpi-ink: var(--m-violet-ink); --kpi-fill: var(--m-violet-fill); }
.m-indigo { --kpi-tint: var(--m-indigo-tint); --kpi-ink: var(--m-indigo-ink); --kpi-fill: var(--m-indigo-fill); }
.m-amber { --kpi-tint: var(--m-amber-tint); --kpi-ink: var(--m-amber-ink); --kpi-fill: var(--m-amber-fill); }
.m-plum { --kpi-tint: var(--m-plum-tint); --kpi-ink: var(--m-plum-ink); --kpi-fill: var(--m-plum-fill); }
/* Filled chips/badges: solid hue, white text, in BOTH themes. */
.fill { background: var(--fill-bg, var(--brand)); color: var(--on-fill); border: 0; }
.fill.m-teal{--fill-bg:var(--m-teal-fill)} .fill.m-mint{--fill-bg:var(--m-mint-fill)}
.fill.m-coral{--fill-bg:var(--m-coral-fill)} .fill.m-gold{--fill-bg:var(--m-gold-fill)}
.fill.m-violet{--fill-bg:var(--m-violet-fill)} .fill.m-indigo{--fill-bg:var(--m-indigo-fill)}
.fill.m-amber{--fill-bg:var(--m-amber-fill)} .fill.m-plum{--fill-bg:var(--m-plum-fill)}
/* Soft tinted pill: tint bg + matching ink. */
.tintchip {
background: var(--kpi-tint, var(--brand-soft));
color: var(--kpi-ink, var(--brand-ink));
border: 1px solid var(--kpi-edge, var(--line));
border-radius: var(--r-pill); padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.m-teal { --kpi-edge: var(--m-teal-edge); } .m-mint { --kpi-edge: var(--m-mint-edge); }
.m-coral { --kpi-edge: var(--m-coral-edge); } .m-gold { --kpi-edge: var(--m-gold-edge); }
.m-violet{ --kpi-edge: var(--m-violet-edge); } .m-indigo{ --kpi-edge: var(--m-indigo-edge); }
.m-amber { --kpi-edge: var(--m-amber-edge); } .m-plum { --kpi-edge: var(--m-plum-edge); }
/* ============================================================================
COLOUR-BLOCKED NAV — each group carries its own hue block.
==========================================================================*/
.navblock { position: relative; padding-left: 12px; }
.navblock::before {
content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
border-radius: var(--r-pill); background: var(--nav-accent, var(--brand));
opacity: .55; transition: opacity var(--t-base) var(--ease), width var(--t-base) var(--ease);
}
.navblock:hover::before, .navblock.is-active::before { opacity: 1; width: 4px; }
.navblock.is-active { background: var(--nav-tint, var(--brand-soft)); border-radius: 0 var(--r-1) var(--r-1) 0; }
.navblock.is-active .nav-label { color: var(--nav-ink, var(--brand-ink)); font-weight: 600; }
.nav-g1 { --nav-accent: var(--m-teal-fill); --nav-tint: var(--m-teal-tint); --nav-ink: var(--m-teal-ink); }
.nav-g2 { --nav-accent: var(--m-violet-fill); --nav-tint: var(--m-violet-tint); --nav-ink: var(--m-violet-ink); }
.nav-g3 { --nav-accent: var(--m-amber-fill); --nav-tint: var(--m-amber-tint); --nav-ink: var(--m-amber-ink); }
.nav-g4 { --nav-accent: var(--m-indigo-fill); --nav-tint: var(--m-indigo-tint); --nav-ink: var(--m-indigo-ink); }
.nav-g5 { --nav-accent: var(--m-plum-fill); --nav-tint: var(--m-plum-tint); --nav-ink: var(--m-plum-ink); }