/* ============================================================================ OPEN BRAIN — DESIGN TOKENS Single source of truth for colour, type, spacing, radius, shadow and motion. Every colour here already existed in the codebase. Nothing was invented: near-duplicates were consolidated to one canonical value, and where a value moved it moved only in lightness, only to clear WCAG AA, preserving hue and saturation. See the consolidation report for old value -> token. A note on --color-primary: Open Brain has no chromatic brand colour. The identity is warm sand and near-black ink, deliberately achromatic, so "primary" is ink. No hue was introduced to fill that slot, and there is no 50-950 tonal scale because a neutral needs an alpha ladder, not a ramp. ========================================================================= */ :root { /* ── CHANNELS ─────────────────────────────────────────────────────────── Raw channels, so alpha variants never re-declare a hue. */ --ink-rgb: 20, 19, 18; --sand-rgb: 225, 216, 202; --paper-rgb: 229, 225, 215; /* ── SURFACES ─────────────────────────────────────────────────────────── */ --color-bg: #E1D8CA; /* page background */ --color-surface: #EFEDE5; /* cards, panels, raised bands */ --color-surface-hover: #E8E7DF; /* ink at 3% over --color-surface */ --color-surface-sunken: #CFC8BA; /* wells, insets */ --color-surface-inverse:#141312; /* dark bands, product mock */ --color-paper: #E5E1D7; /* text/uiface on dark surfaces */ /* ── TEXT ─────────────────────────────────────────────────────────────── Alphas chosen to clear AA (4.5:1) on the WORST light surface they can land on (--color-surface-sunken), not merely on --color-bg. */ --color-text: rgb(var(--ink-rgb)); /* 11.16:1 min */ --color-text-strong: rgba(var(--ink-rgb), 0.80); /* 7.13:1 min */ --color-text-muted: rgba(var(--ink-rgb), 0.64); /* 4.54:1 min */ /* Below AA by design. Only for text that is aria-hidden AND duplicated by structure — decorative numerals, marquee separators. Never body copy. */ --color-text-whisper: rgba(var(--ink-rgb), 0.22); /* Same ladder inverted, verified against --color-surface-inverse. */ --color-text-on-dark: rgba(var(--paper-rgb), 1.00); /* 14.21:1 */ --color-text-on-dark-strong: rgba(var(--paper-rgb), 0.75); /* 8.37:1 */ --color-text-on-dark-muted: rgba(var(--paper-rgb), 0.55); /* 4.98:1 */ /* ── BORDERS & FILLS ──────────────────────────────────────────────────── 1px hairlines. Prefer these over shadow for separation. */ --color-border: rgba(var(--ink-rgb), 0.10); --color-border-strong: rgba(var(--ink-rgb), 0.20); --color-border-on-dark: rgba(var(--paper-rgb), 0.12); --color-fill-subtle: rgba(var(--ink-rgb), 0.03); --color-fill: rgba(var(--ink-rgb), 0.06); /* ── PRIMARY ──────────────────────────────────────────────────────────── */ --color-primary: #141312; --color-primary-hover: #262421; --color-primary-fg: #E5E1D7; /* text on primary — 14.21:1 */ /* Inverse primary, for a filled button sitting on a dark band. */ --color-primary-inv: #E5E1D7; --color-primary-inv-fg: #141312; /* ── ACCENT ───────────────────────────────────────────────────────────── The periwinkle that marks an @mention — the one colour tied to the core interaction. It lives on dark surfaces only, where it measures 6.3:1. Consolidated from #96AAFF and #8b9cf8, which were the same intent. */ --color-accent: #96AAFF; --color-accent-fg: #141312; /* ── FEEDBACK ─────────────────────────────────────────────────────────── Consolidated from four greens doing three jobs. Hue preserved exactly; the -text variants are darkened only, for legibility on light surfaces (the originals were authored for Meridian's black UI and collapse on sand: #4caf50 measured 1.97:1 as body text). */ --color-success: #6DBE8D; /* dots, indicators — non-text */ --color-success-text: #295D3E; /* 5.45 / 6.56 / 4.62 : 1 on the three light surfaces. Same hue (144deg), same saturation (38%). */ --color-warning: #E8A87C; /* non-text */ --color-warning-text: #824317; /* 5.38 / 6.48 / 4.57 : 1. hue 24deg, saturation 70% — both preserved. */ --color-danger: #E56464; /* non-text */ --color-danger-text: #A61C1C; /* 5.31 / 6.39 / 4.50 : 1. hue 0deg, saturation 71% — both preserved. */ --color-focus: rgba(var(--ink-rgb), 0.85); /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── From 21 ad-hoc sizes (including 8.5, 11.5, 12.5, 13.5, 14.5 — nudging, not a scale) down to 7 steps. */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; /* display only */ --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: 56px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.14em; /* ── SPACING ──────────────────────────────────────────────────────────── From 38 values (16 off any 4px grid) to an 8px scale. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ── RADIUS ───────────────────────────────────────────────────────────── From 13 distinct radii to two, plus a pill. */ --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px; /* ── ELEVATION ────────────────────────────────────────────────────────── From 32 shadows, most built on pure #000 (cold against a warm palette), to two in warm ink. Default to --color-border; reach for these only on hover lift and genuinely floating surfaces. */ --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.04), 0 8px 24px rgba(var(--ink-rgb), 0.06); --shadow-md: 0 2px 4px rgba(var(--ink-rgb), 0.06), 0 16px 40px rgba(var(--ink-rgb), 0.12); /* ── MOTION ───────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --duration-fast: 150ms; /* hover, focus */ --duration-base: 250ms; /* reveals */ --duration-slow: 400ms; /* section transitions */ /* ── LAYOUT ───────────────────────────────────────────────────────────── */ --content-max: 1100px; --prose-max: 68ch; /* ~66 characters */ --gutter: 24px; } @media (min-width: 768px) { :root { --gutter: 48px; } } /* Breakpoints must be literals in @media; documented here as the canon: 480px phone 768px tablet 1024px small laptop Design targets: 375 / 768 / 1024 / 1440. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ── COMPATIBILITY ALIASES ──────────────────────────────────────────────── styles.css and components.css are written against the previous token names. These map them onto the canonical set above so nothing breaks while pages migrate. Delete once no `var(--surface…)`, `var(--text-…)`, `var(--ink…)` or `var(--bg…)` remain outside this file. */ :root { --surface: var(--color-bg); --surface-raised: var(--color-surface); --surface-sunken: var(--color-surface-sunken); --surface-inverse: var(--color-surface-inverse); --paper: var(--color-paper); --surface-rgb: var(--sand-rgb); --text-primary: var(--color-text); --text-secondary: var(--color-text-strong); --text-muted: var(--color-text-muted); --text-whisper: var(--color-text-whisper); --text-on-dark: var(--color-text-on-dark); --text-on-dark-secondary: var(--color-text-on-dark-strong); --text-on-dark-muted: var(--color-text-on-dark-muted); --border: var(--color-border); --border-strong: var(--color-border-strong); --border-on-dark: var(--color-border-on-dark); --fill: var(--color-fill); --fill-subtle: var(--color-fill-subtle); --accent-green: var(--color-success); --accent-green-text: var(--color-success-text); --accent-blue: var(--color-accent); --accent-amber: var(--color-warning); --accent-red: var(--color-danger); --accent-mention: var(--color-accent); --focus-ring: var(--color-focus); /* Legacy names from the original stylesheet. */ --bg: var(--color-bg); --bg2: var(--color-surface); --bg3: var(--color-surface-sunken); --ink: var(--color-surface-inverse); --ink80: var(--color-text-strong); --ink60: var(--color-text-muted); --ink50: var(--color-text-muted); /* was 3.20:1 — now 4.54:1 */ --ink20: var(--color-text-whisper); --ink10: var(--color-border); --ink06: var(--color-fill); --ink03: var(--color-fill-subtle); --section-pad: var(--space-32) var(--gutter); --section-max: var(--content-max); }