/* ============================================================ STRATOS — Unified Design System Single source of truth for design tokens across all modules. Light mode → inspired by anond.app (cream/blueprint/brick) Dark mode → inspired by /quarterly (oklch deep blue-gray) Include with: (or "./theme.css" for /home, "./theme.css" for apex) Then toggle with data-theme="light|dark" on . ============================================================ */ /* ─── Fonts (canonical) ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ─── DARK MODE (default) ──────────────────────────────────── */ :root { /* Typography */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --serif: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Surfaces */ --bg: oklch(0.16 0.012 270); --bg-soft: oklch(0.18 0.012 270); --panel: oklch(0.20 0.012 270); --panel-2: oklch(0.23 0.012 270); --panel-3: oklch(0.27 0.012 270); --surface: oklch(0.20 0.012 270); /* alias for legacy modules */ --card: oklch(0.20 0.012 270); /* alias for legacy modules */ --card-2: oklch(0.23 0.012 270); --top-bg: oklch(0.13 0.012 270); /* Rules / lines */ --rule: oklch(0.26 0.012 270); --rule-2: oklch(0.34 0.012 270); --line: oklch(0.26 0.012 270); /* alias */ --line-strong: oklch(0.34 0.012 270); /* Ink (text) */ --ink: oklch(0.94 0.005 80); --ink-2: oklch(0.72 0.012 80); --ink-3: oklch(0.54 0.012 80); --muted: oklch(0.66 0.012 80); /* alias */ --muted-2: oklch(0.52 0.012 80); /* Status colors */ --good: oklch(0.74 0.16 145); --good-bg: color-mix(in oklch, var(--good) 18%, transparent); --bad: oklch(0.70 0.20 25); --bad-bg: color-mix(in oklch, var(--bad) 18%, transparent); --warn: oklch(0.78 0.15 75); --warn-bg: color-mix(in oklch, var(--warn) 18%, transparent); --neutral: oklch(0.55 0.012 80); --pos: oklch(0.74 0.16 145); /* gtm v3 alias */ --neg: oklch(0.70 0.20 25); /* gtm v3 alias */ /* Brand */ --accent: oklch(0.65 0.14 15); --accent-2: oklch(0.55 0.14 15); --ais: oklch(0.55 0.06 250); --true: oklch(0.68 0.16 15); /* Shadows */ --shadow: 0 4px 14px rgba(0, 0, 0, 0.28); --shadow-strong: 0 10px 32px rgba(0, 0, 0, 0.40); /* Misc */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; } /* ─── LIGHT MODE (apex-inspired cream + blueprint accent) ─── */ [data-theme="light"] { /* Surfaces — cream paper */ --bg: oklch(0.94 0.018 75); /* #f4ede1-ish */ --bg-soft: oklch(0.91 0.020 75); /* #efe6d4-ish */ --panel: oklch(0.97 0.010 75); /* paper white */ --panel-2: oklch(0.93 0.014 75); --panel-3: oklch(0.88 0.018 75); --surface: oklch(0.97 0.010 75); --card: oklch(0.97 0.010 75); --card-2: oklch(0.94 0.013 75); --top-bg: oklch(0.91 0.020 75); /* Rules */ --rule: oklch(0.86 0.014 75); /* #d9cfb9-ish */ --rule-2: oklch(0.78 0.018 75); --line: oklch(0.86 0.014 75); --line-strong: oklch(0.78 0.018 75); /* Ink */ --ink: oklch(0.22 0.012 60); /* #2a2825-ish */ --ink-2: oklch(0.42 0.012 60); --ink-3: oklch(0.56 0.014 60); --muted: oklch(0.52 0.014 60); /* #807a6e-ish */ --muted-2: oklch(0.62 0.012 60); /* Status */ --good: oklch(0.50 0.16 145); --good-bg: color-mix(in oklch, var(--good) 14%, transparent); --bad: oklch(0.52 0.20 25); --bad-bg: color-mix(in oklch, var(--bad) 12%, transparent); --warn: oklch(0.62 0.16 75); --warn-bg: color-mix(in oklch, var(--warn) 14%, transparent); --neutral: oklch(0.52 0.012 60); --pos: oklch(0.50 0.16 145); --neg: oklch(0.52 0.20 25); /* Brand — brick red on cream */ --accent: oklch(0.55 0.18 30); /* #c75a3a-ish */ --accent-2: oklch(0.48 0.18 30); --ais: oklch(0.46 0.10 250); --true: oklch(0.55 0.18 30); /* Shadows */ --shadow: 0 4px 14px rgba(60, 50, 35, 0.10); --shadow-strong: 0 10px 32px rgba(60, 50, 35, 0.16); } /* ─── Module-specific aliases (STRATOS nav prefixes) ───────── Lets modules using --st-* keep working without rewriting. */ :root, [data-theme="dark"], [data-theme="light"] { --st-bg: var(--bg); --st-panel: var(--panel); --st-panel2: var(--panel-2); --st-rule: var(--rule); --st-ink: var(--ink); --st-ink2: var(--ink-2); --st-ink3: var(--ink-3); --st-good: var(--good); --st-ais: var(--ais); --st-true: var(--true); } /* ─── Base typography reset ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.18s ease, color 0.18s ease; } /* Smooth theme toggle for all themable elements */ *, *::before, *::after { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.12s ease; } /* ─── Light-mode paper-grain texture (subtle, opt-in) ────── Add class="bg-grain" to to enable. */ [data-theme="light"] body.bg-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(42, 40, 37, 0.04) 1px, transparent 1px); background-size: 3px 3px; z-index: 0; } /* ─── Selection ───────────────────────────────────────────── */ ::selection { background: var(--accent); color: #fff; } /* ─── Scrollbar (subtle, themed) ──────────────────────────── */ * { scrollbar-color: var(--rule-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; border: 2px solid transparent; }