/* ============================================================================ Brevia — Design Tokens (source of truth) Import this everywhere. Set data-theme="dark|light" and data-accent="indigo| teal|violet" on . Defaults: dark + indigo. ============================================================================ */ /* ---- Theme-independent primitives -------------------------------------- */ :root { /* Fonts */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-serif:"Newsreader", Georgia, serif; /* spec/editorial chrome only, not an app token */ /* Type scale (iOS-aligned). size / line-height / weight */ --t-display: 34px; --lh-display: 40px; --t-title1: 28px; --lh-title1: 34px; --t-title2: 22px; --lh-title2: 28px; --t-title3: 20px; --lh-title3: 25px; --t-headline:17px; --lh-headline:22px; --t-body: 17px; --lh-body: 24px; --t-callout: 16px; --lh-callout: 21px; --t-subhead: 15px; --lh-subhead: 20px; --t-footnote:13px; --lh-footnote:18px; --t-caption: 12px; --lh-caption: 16px; --t-mono: 14px; --lh-mono: 20px; /* Spacing — 4pt grid */ --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; /* Radius — continuous-corner feel */ --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* Mindmap node palette — 6 categorical, Okabe-Ito colorblind-safe lineage. *-d = on dark surfaces, *-l = on light surfaces. */ --node-blue-d:#5B7CF5; --node-blue-l:#3D52C4; --node-sky-d: #57B6E6; --node-sky-l: #1E84BC; --node-teal-d:#23B19A; --node-teal-l:#0E8A75; --node-amber-d:#E3A53C; --node-amber-l:#B97D18; --node-verm-d:#E26B50; --node-verm-l:#C2492F; --node-purple-d:#BD81D6;--node-purple-l:#9050BC; } /* ---- Accent families ---------------------------------------------------- */ :root[data-accent="indigo"] { --accent: #7385F6; --accent-strong: #5566E0; } :root[data-accent="teal"] { --accent: #2BC0AB; --accent-strong: #129E8B; } :root[data-accent="violet"] { --accent: #A88BFB; --accent-strong: #8662E8; } /* ---- Dark theme (primary) ---------------------------------------------- */ :root[data-theme="dark"] { --bg: #0E0F13; --surface-1: #15171D; --surface-2: #1C1E26; --surface-3: #242732; --hairline: rgba(255,255,255,0.08); --hairline-strong: rgba(255,255,255,0.15); --fg-1: #ECEDF1; --fg-2: #A4AAB8; --fg-3: #6C7283; --on-accent: #0E0F13; --mix-toward: #FFFFFF; /* hover lightens in dark */ --success:#3FB36B; --warning:#E2A23B; --danger:#E5675C; --info: var(--accent); --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 6px 20px rgba(0,0,0,0.45); --shadow-3: 0 16px 48px rgba(0,0,0,0.55); } /* Indigo/violet accents read better with white text on the fill in dark mode */ :root[data-theme="dark"][data-accent="indigo"], :root[data-theme="dark"][data-accent="violet"] { --on-accent:#FFFFFF; } /* ---- Light theme -------------------------------------------------------- */ :root[data-theme="light"] { --bg: #F7F6F3; /* warm paper */ --surface-1: #FFFFFF; --surface-2: #FBFAF8; --surface-3: #F1EFEA; --hairline: rgba(22,22,32,0.09); --hairline-strong: rgba(22,22,32,0.16); --fg-1: #1B1D24; --fg-2: #565B69; --fg-3: #8B909D; --on-accent: #FFFFFF; --mix-toward: #000000; /* hover darkens in light */ --success:#2C9A56; --warning:#B9831F; --danger:#CE4B3F; --info: var(--accent-strong); --shadow-1: 0 1px 2px rgba(30,30,45,0.06); --shadow-2: 0 6px 22px rgba(30,30,45,0.08); --shadow-3: 0 18px 48px rgba(30,30,45,0.12); } /* ---- Derived accent helpers (work in any theme) ------------------------- */ :root { --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-softer:color-mix(in srgb, var(--accent) 9%, transparent); --accent-hover: color-mix(in srgb, var(--accent), var(--mix-toward) 12%); --accent-line: color-mix(in srgb, var(--accent) 38%, transparent); }