/* ============================================================ RiskMind Design System — Tokens calm · precise · solid Structure shared across 3 directions (Slate / Ledger / Graphite), each available in Light + Dark. Set on : data-theme="slate|ledger|graphite" data-mode="light|dark" ============================================================ */ :root { /* — Type families (loaded in the page ) — */ --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-display: var(--font-sans); /* — Type scale (airy, editorial) — */ --text-2xs: 0.6875rem; /* 11px micro mono labels */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base:0.9375rem; /* 15px body */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 4rem; /* 64px */ --text-6xl: 5rem; /* 80px */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --track-tight: -0.02em; --track-normal: 0; --track-label: 0.14em; /* uppercase mono labels */ --display-weight: 700; --display-tracking: var(--track-tight); /* — Spacing (4px base) — */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* — Radii (modest, not bubbly) — */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* — Motion — */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; /* — Risk semantics (status only — never the brand accent) — */ --crit: #C73E3A; --crit-soft: #FBEAE8; --crit-ink: #8E2420; --warn: #B0700C; --warn-soft: #FBF1DD; --warn-ink: #7A4D06; --ok: #2E7D57; --ok-soft: #E5F2EB; --ok-ink: #1C5238; --info: #3A6CC4; --info-soft: #E9F0FB; --info-ink: #244a8c; --neutral-soft: #F0F1F3; --neutral-ink: #5B626D; } /* ==================== MODE: LIGHT ==================== */ :root, [data-mode="light"] { --bg: #F5F6F8; /* app backdrop / sunken canvas */ --surface: #FFFFFF; /* cards, panels */ --surface-2: #FBFBFC; /* subtle inner */ --surface-sunken:#EFF1F4; --ink: #14171C; /* primary text */ --ink-strong: #05070A; --ink-muted: #565C66; /* secondary text */ --ink-faint: #8A909B; /* tertiary / captions */ --ink-onfill: #FFFFFF; --line: #E5E7EB; /* hairlines */ --line-strong: #D3D6DC; --line-faint: #EFF0F3; /* dark navigation chrome (light mode keeps a dark rail, like the app) */ --nav-bg: #0B0D11; --nav-bg-2: #14171D; --nav-ink: #E7E9ED; --nav-ink-muted: #8A909B; --nav-line: rgba(255,255,255,0.08); --logo-invert: 0; /* logo is black ink → no invert on light surfaces */ --nav-logo-invert: 1; /* but invert on the dark nav rail */ --shadow-sm: 0 1px 2px rgba(16,18,22,.05), 0 1px 1px rgba(16,18,22,.04); --shadow-md: 0 1px 2px rgba(16,18,22,.04), 0 8px 24px rgba(16,18,22,.08); --shadow-lg: 0 4px 10px rgba(16,18,22,.06), 0 24px 56px rgba(16,18,22,.14); --overlay: rgba(12,14,18,.42); } /* ==================== MODE: DARK ==================== */ [data-mode="dark"] { --bg: #0A0C0F; --surface: #14171C; --surface-2: #181C22; --surface-sunken:#0E1015; --ink: #F2F4F7; --ink-strong: #FFFFFF; --ink-muted: #9BA2AD; --ink-faint: #6A7079; --ink-onfill: #FFFFFF; --line: #262B33; --line-strong: #353B45; --line-faint: #1D2128; --nav-bg: #050608; --nav-bg-2: #0E1116; --nav-ink: #E7E9ED; --nav-ink-muted: #7C828C; --nav-line: rgba(255,255,255,0.07); --logo-invert: 1; /* invert black logo on dark surfaces */ --nav-logo-invert: 1; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 8px 24px rgba(0,0,0,.55), 0 32px 64px rgba(0,0,0,.6); --overlay: rgba(0,0,0,.6); /* risk tints re-tuned for dark surfaces */ --crit: #F08680; --crit-soft: rgba(199,62,58,.16); --crit-ink: #F3A8A3; --warn: #E3A93D; --warn-soft: rgba(176,112,12,.18); --warn-ink: #ECC27A; --ok: #5FB98C; --ok-soft: rgba(46,125,87,.18); --ok-ink: #8FD2AF; --info: #76A1EA; --info-soft: rgba(58,108,196,.18); --info-ink: #A6C2F2; --neutral-soft: rgba(255,255,255,.06); --neutral-ink: #9BA2AD; } /* ==================== DIRECTION: SLATE ==================== Apple/Linear calm · cool neutrals · cobalt accent · all-grotesque */ [data-theme="slate"] { --font-display: var(--font-sans); --display-weight: 760; --display-tracking: -0.025em; --accent: #2D5BD6; --accent-strong: #2247AE; --accent-soft: #EAF0FD; --accent-line: #C5D6F7; --accent-ink: #FFFFFF; --focus-ring: rgba(45,91,214,.35); } [data-theme="slate"][data-mode="dark"] { --accent: #6A92F2; --accent-strong: #87A8F6; --accent-soft: rgba(106,146,242,.16); --accent-line: rgba(106,146,242,.4); --accent-ink: #0A0C0F; --focus-ring: rgba(106,146,242,.45); } /* ==================== DIRECTION: LEDGER ==================== Editorial · warm paper · burnt-amber accent · serif display */ [data-theme="ledger"] { --font-display: "Newsreader", Georgia, "Times New Roman", serif; --display-weight: 560; --display-tracking: -0.01em; --accent: #BC511C; --accent-strong: #9C4115; --accent-soft: #FBEEE2; --accent-line: #E8CDB2; --accent-ink: #FFFFFF; --focus-ring: rgba(188,81,28,.32); } /* warm paper neutrals for Ledger */ [data-theme="ledger"][data-mode="light"] { --bg: #F3F0E9; --surface: #FCFAF6; --surface-2: #F8F5EE; --surface-sunken:#EDE8DC; --ink: #1B1813; --ink-strong: #0C0A07; --ink-muted: #5C564B; --ink-faint: #8C8576; --line: #E5DFD0; --line-strong: #D7CFBB; --line-faint: #EEE9DC; --nav-bg: #16130E; --nav-bg-2: #201C15; --nav-line: rgba(255,255,255,0.08); } [data-theme="ledger"][data-mode="dark"] { --accent: #E0742F; --accent-strong: #EB8847; --accent-soft: rgba(224,116,47,.15); --accent-line: rgba(224,116,47,.4); --accent-ink: #120D08; --focus-ring: rgba(224,116,47,.4); --bg: #100E0A; --surface: #1A1611; --surface-2: #1F1A14; --surface-sunken:#0E0C08; --ink: #F5F0E6; --ink-muted: #A39B8B; --ink-faint: #6F685B; --line: #2C271E; --line-strong: #3B352A; --line-faint: #211D16; --nav-bg: #0A0805; --nav-bg-2: #14110B; } /* ==================== DIRECTION: GRAPHITE ==================== Technical/instrument · near-monochrome · mono-forward · muted steel accent */ [data-theme="graphite"] { --font-display: "Space Grotesk", var(--font-sans); --display-weight: 600; --display-tracking: -0.02em; --accent: #3E5878; --accent-strong: #2F455F; --accent-soft: #EBEEF2; --accent-line: #CBD3DD; --accent-ink: #FFFFFF; --focus-ring: rgba(62,88,120,.34); } [data-theme="graphite"][data-mode="light"] { --bg: #F4F5F6; --surface: #FFFFFF; --surface-sunken:#ECEEF0; --line: #E3E5E8; } [data-theme="graphite"][data-mode="dark"] { --accent: #8AA4C4; --accent-strong: #A4B8D2; --accent-soft: rgba(138,164,196,.14); --accent-line: rgba(138,164,196,.36); --accent-ink: #0A0C0F; --focus-ring: rgba(138,164,196,.42); }