/* ═══════════════════════════════════════════════════════════════ ATLAS DESIGN SYSTEM — CANONICAL THEME REFERENCE ═══════════════════════════════════════════════════════════════ This is the canonical reference for theme tokens across all Atlas surfaces. New apps and modules should copy these values into their own :root and html[data-theme="light"] blocks. STATUS: Documentation only. Tokens are still defined per-app. Consolidation into this file is a future refactor (post-extraction). ─────────────────────────────────────────────────────────────── THEME APPLICATION MECHANISM ─────────────────────────────────────────────────────────────── Light mode is signaled by: Dark mode is signaled by: absence of the data-theme attribute Storage: localStorage key 'atlas-theme', values 'light' | 'dark' First-visit fallback: prefers-color-scheme media query Required head init script (FOUC prevention) for any themed app: ─────────────────────────────────────────────────────────────── CANONICAL PALETTE — DARK MODE (default) ─────────────────────────────────────────────────────────────── --bg: #050505 Body background, deepest layer --surface: #0F0F0F Primary surface (cards, panels) --surface-2: #171717 Secondary surface (elevated cards) --surface-3: #1F1F1F Tertiary surface (hover, active) --border: #252525 Default border --border-hover: #363636 Border on hover --text: #F0EDE6 Primary text --text-secondary: #888888 Secondary text (labels, captions) --text-dim: #555555 Tertiary text (placeholders, disabled) ─────────────────────────────────────────────────────────────── CANONICAL PALETTE — LIGHT MODE ─────────────────────────────────────────────────────────────── --bg: #FAFAF7 Warm cream body background --surface: #FFFFFF Primary surface --surface-2: #F5F3EF Secondary surface (cream-tinted) --surface-3: #EFEAE0 Tertiary surface (warmer) --border: #E8E4DE Default border --border-hover: #D8D4CE Border on hover --text: #1A1A17 Primary text (warm near-black) --text-secondary: #555555 Secondary text --text-dim: #999999 Tertiary text ─────────────────────────────────────────────────────────────── BRAND ACCENT (both modes) ─────────────────────────────────────────────────────────────── --accent: #C8A96E Atlas gold (primary brand color) --accent-dim: rgba(200,169,110,0.10) Subtle accent backgrounds --accent-mid: rgba(200,169,110,0.14) Medium accent backgrounds ─────────────────────────────────────────────────────────────── SEMANTIC COLORS (both modes) ─────────────────────────────────────────────────────────────── --red: #D95C5C Errors, destructive actions --green: #4CAF82 Success, positive trends --blue: #5B8DEF Info, links, neutral highlights --amber: #E8A857 Warnings, attention required ─────────────────────────────────────────────────────────────── TYPOGRAPHY (both modes) ─────────────────────────────────────────────────────────────── --display: 'Playfair Display', Georgia, serif Used for: view titles, headlines, hero text --font: 'DM Sans', -apple-system, sans-serif Used for: body, UI, navigation --mono: 'DM Mono', monospace Used for: data, code, monospaced UI ─────────────────────────────────────────────────────────────── LAYOUT TOKENS (per-app, document for reference) ─────────────────────────────────────────────────────────────── --rail-w: 56px Left icon rail width --topbar-h: 48px Top bar height (Personal) 52px Top bar height (Hub) --radius: 8px Default border radius --ease: 0.16s ease Default transition ─────────────────────────────────────────────────────────────── SPECIAL CASES ─────────────────────────────────────────────────────────────── - PeoplesWay surface: light theme is the DEFAULT, no toggle. Uses warm earth tones distinct from Atlas (TBD). - Terminal surface: dark mode is FIXED, no toggle. Bloomberg convention — institutional research tool. Uses canonical dark palette above. ─────────────────────────────────────────────────────────────── */ /* shared/atlas.css * Canonical design tokens for all Atlas apps. * Import in any HTML file: * or from a sub-app: */ /* ── Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); /* ── Design Tokens ── */ :root { /* Brand */ --gold: #C9A96E; --gold-dim: rgba(201, 169, 110, 0.10); /* Backgrounds */ --bg: #0A0A0A; --surface: #111111; --surface-2: #1A1A1A; --surface-3: #222222; /* Text */ --text: #E8E8E8; --text-secondary: #888888; --text-dim: #555555; /* Borders */ --border: #2A2A2A; --border-hover: #3A3A3A; /* Radius */ --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; /* Semantic colours */ --blue: #5B8DEF; --blue-dim: rgba(91, 141, 239, 0.10); --green: #4ADE80; --green-dim: rgba(74, 222, 128, 0.10); --red: #F87171; --purple: #A78BFA; --purple-dim: rgba(167, 139, 250, 0.10); --orange: #FB923C; --orange-dim: rgba(251, 146, 60, 0.10); --cyan: #22D3EE; --cyan-dim: rgba(34, 211, 238, 0.10); --pink: #F472B6; --pink-dim: rgba(244, 114, 182, 0.10); /* Typography */ --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'DM Mono', monospace; --display: 'Playfair Display', Georgia, serif; }