/* * shared/ui — design tokens (defaults) * * Every colour, radius and shadow in the system lives here as a CSS custom * property on `:root`. The components in `system.css` reference these tokens * and nothing else — writing a raw hex value into a component breaks the * system. * * Per-app customisation: do NOT edit this file. Load your own `theme.css` * after `tokens.css` and `system.css` and override the tokens you want on * `:root`. See README.md. * * Light/dark: each colour token is defined once via `light-dark()` and follows * the system setting. Apps with their own switch set `data-theme="light"` or * `"dark"` on . */ :root { color-scheme: light dark; /* Surfaces & lines */ --bg: light-dark(#f2f4f7, #14171c); --card: light-dark(#ffffff, #1c2128); --card-2: light-dark(#f8fafc, #22282f); /* inset surfaces (table head, wells) */ --border: light-dark(#e4e7ec, #2a303a); --border-strong: light-dark(#cbd2dc, #3a4250); /* Text */ --text: light-dark(#101828, #e6e9ef); --text-2: light-dark(#475467, #a7b0bf); --muted: light-dark(#667085, #8b95a5); /* Accent — the app's single brand colour (default: indigo) */ --primary: light-dark(#4f46e5, #818cf8); --primary-hover: light-dark(#4338ca, #a5b0fc); --primary-soft: light-dark(#eef2ff, #26294a); /* wash surface */ --primary-ink: light-dark(#3730a3, #c7d2fe); /* text on the wash surface */ --on-primary: light-dark(#ffffff, #14171c); /* text on a filled accent surface */ /* Semantics — reserved for meaning, never decoration */ --pos: light-dark(#15803d, #4cc38a); --neg: light-dark(#dc2626, #f16a6a); --warn: light-dark(#b45309, #e5a13d); --warn-soft: light-dark(#fef3c7, #3a2e14); --warn-border: light-dark(#f59e0b, #a16207); /* Charts (validated polarity pair, see README.md) */ --chart-pos: light-dark(#15803d, #0d9668); --chart-neg: light-dark(#dc2626, #e66767); /* Typography */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Headings and figures. Defaults to the body face, so an app that does not set it gets a single-face design rather than a wrong second one. */ --font-display: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-base: 15px; /* Shape & elevation */ --r-s: 6px; --r-m: 10px; --r-l: 14px; --shadow-tint-1: light-dark(rgba(16, 24, 40, 0.05), rgba(0, 0, 0, 0.35)); --shadow-tint-2: light-dark(rgba(16, 24, 40, 0.10), rgba(0, 0, 0, 0.45)); --shadow-1: 0 1px 2px var(--shadow-tint-1); --shadow-2: 0 4px 14px var(--shadow-tint-2); /* Dims the page behind an overlay (the mobile nav drawer). Dark in both schemes — unlike every other surface token, this one does not flip: a light scrim over a dark page reads as a flash, not as depth. */ --scrim: light-dark(rgba(16, 24, 40, 0.45), rgba(0, 0, 0, 0.6)); /* Card padding. A token rather than a literal because `.card-foot` has to cancel it with a negative margin to reach the card's edge. */ --card-pad-x: 1.3rem; --card-pad-y: 1.15rem; /* Layout rhythm — the spacing the primitives in `system.css` use. These are the knobs that let two apps share one layout vocabulary without agreeing on its density. */ --gap-section: 1.5rem; /* between the sections of a page (.stack) */ --gap-grid: 1.25rem; /* between the columns of a layout grid (.cols-*) */ --gap-tight: 0.75rem; /* dense clusters (.stack-tight, .tiles) */ --gap-inline: 0.5rem; /* wrapped inline rows (.row-wrap) */ /* Collapse thresholds: the narrowest a track may get before its grid reflows to fewer columns. */ --col-min: 340px; /* .cols-2 */ --tile-min: 11rem; /* .tiles */ --col-wide: 1.6fr; /* the dominant track in .cols-wide-narrow */ /* Header & touch. The two breakpoints themselves are literals in `system.css` — a custom property cannot be read from an `@media` query, so writing them here would only look like a knob. They are 720px (phone/tablet: the drawer takes over) and 480px (small phone: density drops a step). `--tap-min` is applied at the mobile tier only. A mouse does not need a 44px target, and forcing one on the desktop bar would cost it the density that is the point of the design. */ --tap-min: 44px; --topbar-h: 3.5rem; --drawer-w: min(20rem, 82vw); } /* Explicit switch (optional). Without the attribute the system decides. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }