/* themes.css — Design tokens: the :root custom-property palette shared by every component. Extracted verbatim from index.html (v4.96) lines 10–28; order preserved via main.css. */ :root { /* TELL THE BROWSER WHICH WAY UP THE PAGE IS. Without this the engine renders every native control — option lists, scrollbars, checkboxes, date pickers — for its own default scheme rather than for ours, which is how a light-theme dropdown came up as a black panel. One line here does what per-control CSS cannot. */ color-scheme: dark; --bg0: #070C16; --bg1: #0B1322; --glass: rgba(12, 19, 35, .66); --glass2: rgba(17, 26, 46, .55); --stroke: rgba(255, 255, 255, .09); --stroke2: rgba(255, 255, 255, .16); --text: #EAF0F9; /* THE SAME COLOUR AS A TRIPLE, so a tint can be written rgba(...). `color-mix(in srgb, var(--text) 4%, transparent)` is the natural way to say "4% of the ink" and Chrome computes it to `color(srgb …)` — which html2canvas cannot parse, and it does not skip the element, it throws and aborts the whole capture. One banded table on the board and every PNG, PDF, deck and Word file failed with "Dashboard export failed". rgba() serialises as rgba() and survives. Keep these in step with the hex above. */ --text-rgb: 234, 240, 249; --dim: #8B99B0; --navy: #0A1E3C; --orange: #FF7A1A; --accent-rgb: 255, 122, 26; --orange2: #FFA149; --danger: #FF6B81; /* Geist Mono, so the coordinate and distance readouts belong to the same family as the rest of the interface instead of reading as a borrowed terminal font. */ /* The interface family, as a token. 38 rules across this project write `font: 700 11px/1 var(--font, inherit)` and every one of them was invalid, because --font was never defined and the fallback `inherit` is not a font-family a shorthand accepts. An invalid shorthand is dropped whole, so those rules were setting no weight, no size and no line-height — they inherited, silently, and looked like a design decision. Gauge captions, treemap labels, chart labels, the visual gallery's caption and the score numbers were all in that set. Defining it makes them mean what they say. */ --font: 'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --sbw: 396px; --r: 13px; --chipFont: 11.5px; --untiltY: 1; /* ------------------------------------------------------------------ Design system tokens. The palette above is the original brand layer and is left untouched so every existing rule keeps working. What follows is the systematic layer that new and refined components draw from: one scale per dimension, so spacing, corner radius, elevation and motion stay consistent instead of being re-invented per component. ------------------------------------------------------------------ */ /* Type — a 1.2 modular scale anchored on the 13px body size. */ --fs-micro: 9.5px; --fs-small: 11px; --fs-body: 12.5px; --fs-lg: 15px; --fs-xl: 19px; --lh-tight: 1.25; --lh-body: 1.5; --tracking-caps: .07em; /* Space — 4px base, so every gap is a multiple and edges align. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px; /* Radius */ --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* Elevation — three steps only. More than three and nothing reads as "raised" any more; each level pairs a tight contact shadow with a soft ambient one, which is what keeps panels from looking like flat rectangles with a blur behind them. */ --elev-1: 0 1px 2px rgba(5, 10, 20, .16), 0 2px 8px rgba(5, 10, 20, .10); --elev-2: 0 2px 4px rgba(5, 10, 20, .20), 0 8px 24px rgba(5, 10, 20, .18); --elev-3: 0 4px 8px rgba(5, 10, 20, .24), 0 20px 48px rgba(5, 10, 20, .30); /* Motion — short and decelerating. Animation is used to show where something came from, never for decoration. */ --dur-fast: 110ms; --dur-base: 190ms; --dur-slow: 320ms; --ease-out: cubic-bezier(.22, .8, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ------------------------------------------------------------------ Glass system. Real glass is not "a translucent panel" — it is three things at once: it *blurs* what is behind it, it *saturates* those colours (which is what stops a blurred backdrop looking like grey sludge), and it catches a highlight along its top edge where light enters. Doing only the first is what makes most "glassmorphism" look cheap. Blur radius and opacity are tokens because they are the two values that have to move together: more blur needs less opacity to still read as glass, and vice versa. ------------------------------------------------------------------ */ --glass-blur: 20px; --glass-saturate: 1.7; --glass-tint: rgba(20, 30, 52, .70); --glass-tint-2: rgba(14, 22, 40, .82); --glass-edge: rgba(255, 255, 255, .11); /* The top-edge catch-light and the inner floor shadow, as one inset pair. */ --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .22); --glass-solid: #0E1626; /* Accent glow — used only on the primary action, never decoratively. */ --accent-glow: 0 0 0 1px rgba(255, 122, 26, .35), 0 6px 22px rgba(255, 122, 26, .28); /* Semantic surfaces, derived from the brand palette. */ --surface: var(--glass); --surface-2: var(--glass2); --surface-solid: #0E1728; /* THE GROUND UNDER A FORM FIELD, as a token rather than a hardcoded rgba(0,0,0,.28). That literal was written for the dark theme and stayed put in the light one, where it is a charcoal box on a white panel — and worse, a browser paints a