/** * 2nth.ai Design System — theme.css * =================================== * THE configurable file. Override variables here to deploy for a different client. * Light mode is default. Dark mode via [data-theme="dark"] on . * * To customise for a client: * 1. Change the Brand tokens section * 2. Optionally change font imports in the HTML * 3. Optionally change domain accent colors * Everything else adapts automatically. */ /* ── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ── Brand tokens (override per client) ───────────────────────────────────── */ :root { --font-display: 'Bebas Neue', sans-serif; --font-body: 'Barlow', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Primary accent — the colour that says "this is 2nth" */ --brand: #06b6d4; /* Cloudflare cyan — 2nth platform */ --brand-dim: rgba(6, 182, 212, 0.12); --brand-border: rgba(6, 182, 212, 0.25); /* Domain accent colours */ --domain-biz: #8b5cf6; --domain-edu: #22c55e; --domain-fin: #10b981; --domain-health: #0ea5e9; --domain-leg: #f59e0b; --domain-tech: #06b6d4; } /* ── Light mode (DEFAULT) ─────────────────────────────────────────────────── */ :root { --bg: #ffffff; --bg-subtle: #f7f8fa; --bg-card: #ffffff; --bg-card-hover: #f7f8fa; --bg-input: #f7f8fa; --text: #0a0a0a; --text-2: #27272a; --text-3: #52525b; --text-muted: #71717a; --text-faint: #a1a1aa; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --grid-line: rgba(0, 0, 0, 0.03); --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); --nav-bg: rgba(255, 255, 255, 0.92); --tag-bg: rgba(6, 182, 212, 0.10); --tag-text: #0369a1; --tag-prod-bg: rgba(34, 197, 94, 0.10); --tag-prod: #166534; --tag-beta-bg: rgba(245, 158, 11, 0.10); --tag-beta: #92400e; --tag-stub-bg: rgba(0, 0, 0, 0.05); --tag-stub: #71717a; --code-bg: #f4f4f5; --code-text: #0a0a0a; } /* ── Dark mode ────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0a0a; --bg-subtle: #141414; --bg-card: #141414; --bg-card-hover: #1c1c1e; --bg-input: #141414; --text: #fafafa; --text-2: #e4e4e7; --text-3: #a1a1aa; --text-muted: #71717a; --text-faint: #52525b; --border: hsla(0, 0%, 100%, 0.07); --border-strong: hsla(0, 0%, 100%, 0.12); --grid-line: hsla(0, 0%, 100%, 0.018); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 4px 16px rgba(0,0,0,0.6); --nav-bg: rgba(10, 10, 10, 0.92); --tag-bg: rgba(6, 182, 212, 0.10); --tag-text: #22d3ee; --tag-prod-bg: rgba(34, 197, 94, 0.10); --tag-prod: #4ade80; --tag-beta-bg: rgba(245, 158, 11, 0.10); --tag-beta: #fbbf24; --tag-stub-bg: rgba(255, 255, 255, 0.05); --tag-stub: #71717a; --code-bg: #1c1c1e; --code-text: #fafafa; } /* ── OS preference (only when no localStorage choice is set) ──────────────── */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #0a0a0a; --bg-subtle: #141414; --bg-card: #141414; --bg-card-hover: #1c1c1e; --bg-input: #141414; --text: #fafafa; --text-2: #e4e4e7; --text-3: #a1a1aa; --text-muted: #71717a; --text-faint: #52525b; --border: hsla(0, 0%, 100%, 0.07); --border-strong: hsla(0, 0%, 100%, 0.12); --grid-line: hsla(0, 0%, 100%, 0.018); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 4px 16px rgba(0,0,0,0.6); --nav-bg: rgba(10, 10, 10, 0.92); --tag-bg: rgba(6, 182, 212, 0.10); --tag-text: #22d3ee; --tag-prod-bg: rgba(34, 197, 94, 0.10); --tag-prod: #4ade80; --tag-beta-bg: rgba(245, 158, 11, 0.10); --tag-beta: #fbbf24; --tag-stub-bg: rgba(255, 255, 255, 0.05); --tag-stub: #71717a; --code-bg: #1c1c1e; --code-text: #fafafa; } }