/* ========================================================================== Inkbraid design tokens Theme: "paper & ink" — warm paper neutrals, indigo-ink brand ramp. Semantic tokens flip between light and dark; the raw ramps do not. ========================================================================== */ :root { /* --- brand ramp: indigo ink -------------------------------------- */ --brand-950: #1d1854; --brand-800: #2b2570; --brand-600: #4f46e5; /* primary brand color */ --brand-400: #8a84f7; --brand-200: #c6c3fd; --brand-100: #e9e8fc; --brand-050: #f4f3fe; /* --- neutral ramp: ink on paper ---------------------------------- */ --neutral-950: #171426; --neutral-700: #403b58; --neutral-500: #6e6887; --neutral-300: #aaa5bd; --neutral-150: #e4e1ec; --neutral-075: #f1efea; --neutral-025: #faf9f5; /* --- semantic (light theme defaults) ----------------------------- */ --bg: var(--neutral-025); /* page background: warm paper */ --surface: #ffffff; /* cards, panels */ --surface-2: var(--neutral-075); /* subtle wells, code blocks */ --text: var(--neutral-950); --text-muted: var(--neutral-500); --line: var(--neutral-150); /* hairlines, borders */ --brand: var(--brand-600); /* links, CTAs, focus rings */ --brand-strong: var(--brand-800); /* hover, headings on brand */ --brand-soft: var(--brand-100); /* tinted backgrounds, badges */ /* --- feedback ----------------------------------------------------- */ --ok: #2e8b6b; --warn: #b7791f; --danger: #be3d3d; /* --- type ---------------------------------------------------------- */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", Consolas, "Cascadia Code", monospace; /* --- shape ---------------------------------------------------------- */ --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; color-scheme: light; } /* Dark theme: follows the OS by default; a page can force either theme by setting data-theme="dark" / data-theme="light" on . Keep this block and the media-query copy below in sync. */ [data-theme="dark"] { --bg: #131020; --surface: #1a1730; --surface-2: #221e3d; --text: #efedf8; --text-muted: #a29dba; --line: #2e2a4a; --brand: var(--brand-400); --brand-strong: var(--brand-200); --brand-soft: #262051; --ok: #4dbd97; --warn: #d9a04a; --danger: #e07070; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #131020; --surface: #1a1730; --surface-2: #221e3d; --text: #efedf8; --text-muted: #a29dba; --line: #2e2a4a; --brand: var(--brand-400); --brand-strong: var(--brand-200); --brand-soft: #262051; --ok: #4dbd97; --warn: #d9a04a; --danger: #e07070; color-scheme: dark; } }