/* Brand & system tokens — mirrors design/brand/tokens.md and the additions in * design/design-system.md §3. Source of truth: tokens.md. If you edit a value * here without updating tokens.md, the spec and the product diverge. */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:wght@200..800&display=swap'); :root { color-scheme: light; /* The logo PNG is white; brightness() turns it ink on light surfaces. */ --logo-filter: brightness(0.106); /* color · background & surface */ --color-bg-canvas: #F6F2EA; --color-bg-surface: #EFEADE; --color-bg-surface-elevated: #E7E1D2; --color-bg-inset: #1B1A17; /* color · foreground */ --color-fg-primary: #1B1A17; --color-fg-secondary: #3D3A33; --color-fg-muted: #6B665A; --color-fg-faint: #9A9384; /* color · semantic */ --color-state-active: #A77B1F; --color-state-warning: #B53A2D; --color-state-error: #8B2418; /* color · border */ --color-border-subtle: #D7D0BF; --color-border-strong: #9A9384; /* color · persona palette */ --color-persona-ink: #1E3A5F; --color-persona-forest: #2F5233; --color-persona-plum: #4D2D4D; --color-persona-bronze: #5C4520; --color-persona-teal: #1F4A4A; --color-persona-slate: #3D434D; /* typography */ --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-ui: 'Source Sans 3', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* radius */ --radius-2: 4px; --radius-pill: 9999px; /* motion */ --motion-fast-duration: 120ms; --motion-medium-duration: 220ms; --ease-out: cubic-bezier(0.2, 0, 0.2, 1); /* shadows / rings — see design-system.md §3 */ --shadow-focus-ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-border-strong); --shadow-elevation-1: 0 -1px 0 var(--color-border-subtle); /* layout primitives */ --ring-active-turn-width: 2px; --layout-sidebar-width: 320px; --layout-content-max: 780px; --layout-header-height: 76px; --layout-composer-min: 96px; --layout-controlbar-height: 52px; } /* Theme resolution: data-theme on is system|light|dark|retro|midnight. "system" * follows prefers-color-scheme; an explicit choice wins in both directions. * The dark values are duplicated on purpose (see design spec §8.2). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="midnight"]) { color-scheme: dark; --logo-filter: none; --color-bg-canvas: #15140F; --color-bg-surface: #1E1C16; --color-bg-surface-elevated: #26241B; --color-bg-inset: #F6F2EA; --color-fg-primary: #E8E3D5; --color-fg-secondary: #C2BCAB; --color-fg-muted: #8A8475; --color-fg-faint: #5C5749; --color-state-active: #D9A852; --color-state-warning: #D86B5E; --color-state-error: #B5402F; --color-border-subtle: #33302A; --color-border-strong: #5C5749; --color-persona-ink: #7BA3D4; --color-persona-forest: #7FAA84; --color-persona-plum: #B07AB0; --color-persona-bronze: #C49B68; --color-persona-teal: #6FAEAE; --color-persona-slate: #A4ACB8; } } :root[data-theme="dark"] { color-scheme: dark; --logo-filter: none; --color-bg-canvas: #15140F; --color-bg-surface: #1E1C16; --color-bg-surface-elevated: #26241B; --color-bg-inset: #F6F2EA; --color-fg-primary: #E8E3D5; --color-fg-secondary: #C2BCAB; --color-fg-muted: #8A8475; --color-fg-faint: #5C5749; --color-state-active: #D9A852; --color-state-warning: #D86B5E; --color-state-error: #B5402F; --color-border-subtle: #33302A; --color-border-strong: #5C5749; --color-persona-ink: #7BA3D4; --color-persona-forest: #7FAA84; --color-persona-plum: #B07AB0; --color-persona-bronze: #C49B68; --color-persona-teal: #6FAEAE; --color-persona-slate: #A4ACB8; } /* Retro — Omarchy "Retro 82". Flat, sharp, monospace. */ :root[data-theme="retro"] { color-scheme: dark; --logo-filter: none; --color-bg-canvas: #05182e; --color-bg-surface: #0b2238; --color-bg-surface-elevated: #134e5a; --color-bg-inset: #f6dcac; --color-fg-primary: #f6dcac; --color-fg-secondary: #a7c9c6; --color-fg-muted: #8cbfb8; --color-fg-faint: #3f8f8a; --color-state-active: #faa968; --color-state-warning: #e97b3c; --color-state-error: #f85525; --color-border-subtle: #134e5a; --color-border-strong: #3f8f8a; --color-persona-ink: #8cbfb8; --color-persona-forest: #028391; --color-persona-plum: #faa968; --color-persona-bronze: #e97b3c; --color-persona-teal: #3f8f8a; --color-persona-slate: #a7c9c6; --font-body: var(--font-mono); --font-ui: var(--font-mono); --radius-2: 0; --shadow-focus-ring: 0 0 0 2px #05182e, 0 0 0 4px #faa968; } /* Midnight — ported from WOTC Plus: near-black navy canvas, blue-tinted * panels, violet actions, cyan and teal accents, Manrope. */ :root[data-theme="midnight"] { color-scheme: dark; --logo-filter: none; --color-bg-canvas: #0b0c16; --color-bg-surface: #13162a; --color-bg-surface-elevated: #1f2342; --color-bg-inset: #8b6dff; --color-fg-primary: #f3f4fb; --color-fg-secondary: #c5c8e2; --color-fg-muted: #8f93b3; --color-fg-faint: #5d6187; --color-state-active: #8b6dff; --color-state-warning: #f59e0b; --color-state-error: #ff6b7a; --color-border-subtle: #262b48; --color-border-strong: #414a7c; --color-persona-ink: #4cc9f0; --color-persona-forest: #2dd4bf; --color-persona-plum: #a35cff; --color-persona-bronze: #f59e0b; --color-persona-teal: #7c9cff; --color-persona-slate: #8f93b3; --font-body: 'Manrope', system-ui, sans-serif; --font-ui: 'Manrope', system-ui, sans-serif; --radius-2: 8px; --shadow-focus-ring: 0 0 0 2px #0b0c16, 0 0 0 4px #8b6dff; }