/* ========================================================================== Matsi design tokens Derived from Matched Materials Brand Guide v2.0 and the app-specific system in docs/MATSI_APP_DESIGN_SYSTEM.html. Values only. No selectors, no components. Every ratio stated in the guide was computed, not assumed; do not change a value here without re-checking it against its ground. ========================================================================== */ :root { /* --- Process inks. Fixed in both themes; only the legal ground changes. */ --ink-cyan: #00B5D8; /* dark ground only (2.12 on Paper) */ --ink-magenta: #FF00B3; /* primary action + marks only */ --ink-yellow: #C8F284; /* dark ground only (1.11 on Paper) */ --ink-key: #1F3A5F; /* ground only, never text */ --ink-paper: #F2EFE7; --ink-ink: #0A1520; --ink-keydeep: #152841; --ink-keyvoid: #0A1420; --ink-cyanink: #00748A; --ink-magink: #CC008F; --ink-limeink: #496600; --ink-slate: #54677A; --ink-mist: #9DAEC2; --ink-ovl-cy: #00AB6F; /* Cyan x Yellow */ --ink-ovl-mg: #C8005C; /* Magenta x Yellow */ /* --- Surfaces (light) */ --bg: #F2EFE7; --surface: #FFFFFF; /* cards only; never the page substrate */ --surface-lift: #F8F6F2; /* between Paper and white: a panel that reads lighter than the page without going white */ --header-bg: #2A4F83; /* medium blue on the Key hue, L34%. Paper text clears 7.18:1 and the Matsi mark stays legible on it (lime 6.48, cyan 3.38). Distinct from Key #1F3A5F itself at 1.39:1 so the header does not read as the same slab as a Key ground elsewhere. */ --header-fg: #F2EFE7; --sunken: #E8E4DA; --border: #D8D3C7; --border-strong: #B9B2A2; /* --- Text (light). Ratios against --bg. */ --text: #0A1520; /* 16.02 */ --text-2: #1F3A5F; /* 9.99 */ --text-muted: #54677A; /* 5.08 */ --text-faint: #6E7F91; /* 3.58 - non-essential only */ /* --- Semantic (light) */ --success: #00754C; --success-bg: #DFF2E9; --warning: #8A5A00; --warning-bg: #F7ECD6; --danger: #B3003F; --danger-bg: #FBE0E8; --info: #00748A; --info-bg: #DCF5FA; --on-danger: #FFFFFF; /* Direction of change. Call sites map intent onto these; never raw green/red, which currently contradicts itself across dashboards. */ --delta-favorable: var(--success); --delta-adverse: var(--danger); --accent: #00748A; --shadow-ink: #0A1520; /* --- Chart series (light). Use in this order; see the guide on the colour-blindness limit -- three series on colour alone. */ --chart-1:#00748A; --chart-2:#496600; --chart-3:#1F3A5F; --chart-4:#C8005C; --chart-5:#00754C; --chart-6:#CC008F; --chart-7:#6B3FA0; --chart-8:#8A5A00; --chart-9:#0E6E6E; --chart-10:#54677A; /* --- Target scale: below / on / above. Magenta to green, NOT red to green. Red-green is the universal bad/good signal and the textbook accessibility failure: under deuteranopia its endpoints land on #666638 and #63634E, the same olive, and the scale stops carrying information for roughly 8% of men. On the STF deviation chart that is a correctness fault, not a matter of taste -- reading "under spec" when a value is over is a wrong engineering call. Magenta-green keeps the same intuition, stays on brand, and survives: endpoints hold dE 27.6 under deuteranopia and 64.9 under protanopia. Decided 2026-08-20. */ --target-below: #CC008F; --target-below-2: #EC8EC9; --target-below-3: #F3D2E1; --target-on: #F2EFE7; --target-above-3: #CCE7D4; --target-above-2: #77C4A1; --target-above: #00754C; /* Full 11-stop ramp for chart interpolation: #CC008F #DD5BAC #EC8EC9 #F3B5DB #F3D2E1 #F2EFE7 #CCE7D4 #A4DEC1 #77C4A1 #469C75 #00754C */ /* Sequential, low -> high. Monotonic in lightness, so it survives any colour deficiency: #DCF5FA #90D5E9 #00B5D8 #0094B0 #00748A #1A5674 #1F3A5F */ /* --- Spacing. 4px grid; 112 (the brand rail) = 28 x 4. */ --s0:0; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s28:112px; --s32:128px; /* --- Type */ --f-display:'Archivo','Helvetica Neue',Arial,sans-serif; --f-mono:'IBM Plex Mono','SF Mono',Consolas,monospace; --f-serif:'Newsreader',Georgia,serif; --t-3xs:10px; --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-base:14px; /* default UI size */ --t-md:15px; --t-lg:17px; /* 17 = brand Body */ --t-xl:20px; --t-2xl:24px; --t-3xl:32px; /* --- Geometry. 0 everywhere; marks keep their own rx 4/100. */ --radius: 0; --rail: 112px; --header-h: 50px; } /* --- Dark, via OS preference (un-stamped document) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0A1420; --surface:#152841; --surface-lift:#101E30; --sunken:#1F3A5F; /* Dark mode keeps the header darker than the light-mode blue: a medium blue band above a Key Void page reads as a stripe rather than chrome. */ --header-bg:#152841; --header-fg:#F2EFE7; --border:#2C4A70; --border-strong:#3D6089; --text:#F2EFE7; --text-2:#B9C4D0; --text-muted:#9DAEC2; --text-faint:#7A8899; --success:#00AB6F; --success-bg:#0B3225; --warning:#F0A830; --warning-bg:#3D2E10; --danger:#FF5C8A; --danger-bg:#3D1526; --info:#00B5D8; --info-bg:#0B3A47; --on-danger:#0A1520; --accent:#00B5D8; --shadow-ink:#000000; --chart-1:#00B5D8; --chart-2:#C8F284; --chart-3:#6FA3E0; --chart-4:#FF3D8A; --chart-5:#00AB6F; --chart-6:#FF00B3; --chart-7:#B48AE8; --chart-8:#F0A830; --chart-9:#4ECDC4; --chart-10:#9DAEC2; } } /* --- Dark, via explicit toggle */ :root[data-theme="dark"] { --bg:#0A1420; --surface:#152841; --surface-lift:#101E30; --sunken:#1F3A5F; --header-bg:#152841; --header-fg:#F2EFE7; --border:#2C4A70; --border-strong:#3D6089; --text:#F2EFE7; --text-2:#B9C4D0; --text-muted:#9DAEC2; --text-faint:#7A8899; --success:#00AB6F; --success-bg:#0B3225; --warning:#F0A830; --warning-bg:#3D2E10; --danger:#FF5C8A; --danger-bg:#3D1526; --info:#00B5D8; --info-bg:#0B3A47; --on-danger:#0A1520; --accent:#00B5D8; --shadow-ink:#000000; --chart-1:#00B5D8; --chart-2:#C8F284; --chart-3:#6FA3E0; --chart-4:#FF3D8A; --chart-5:#00AB6F; --chart-6:#FF00B3; --chart-7:#B48AE8; --chart-8:#F0A830; --chart-9:#4ECDC4; --chart-10:#9DAEC2; }