/* ============================================================================= PureApex Design Tokens — v3.0 (Prototype-authoritative, Pier Foundations) Source: pure-apex-prototype/index.html :root block ============================================================================= Usage: - All color, spacing, shadow, and radius references go through these tokens. - Dark theme is toggled by setting data-theme="dark" on . - Glass system applied to: .card, .sidebar, .topbar, .modal, .dropdown, .kan-col, .kan-card, .toast (see main.css for component usage). ============================================================================= */ /* --------------------------------------------------------------------------- */ /* Brand constants (theme-independent) */ /* --------------------------------------------------------------------------- */ :root { --pure-blue: #2a93c1; --pure-orange: #f1420b; --pure-dark: #080a12; /* Pier Foundations brand aliases */ --pf-blue: #2a93c1; --pf-orange: #f1420b; --pf-green: #10b981; --pf-gold: #D4A574; --pf-red: #ef4444; } /* --------------------------------------------------------------------------- */ /* Light theme (default) */ /* --------------------------------------------------------------------------- */ :root { /* Surfaces */ --bg: #ffffff; --bg-elevated: #f7f9fb; --bg-card: #f7f9fb; --border: #e3e8ee; /* Type */ --text: #0b0f14; --text-muted: #5a6b7e; /* Brand accents */ --accent: #2a93c1; /* primary — blue */ --accent-2: #f1420b; /* secondary — orange */ --focus-ring: #1d7ba8; /* Semantic */ --success: #10b981; --warning: #c26a00; /* darkened for AA on light bg */ --danger: #ef4444; /* Shadow */ --shadow: 0 1px 3px rgba(11,15,20,0.08); /* Glass system — light */ --glass-bg: rgba(255,255,255,0.72); --glass-border: #e3e8ee; --glass-blur: blur(16px) saturate(120%); --glass-shadow: 0 4px 20px rgba(11,15,20,0.08), inset 0 1px 0 rgba(255,255,255,0.90); --glass-radius: 14px; --glass-input-bg: #ffffff; /* Spacing */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 20px; --sp6: 24px; --sp8: 32px; /* Radius */ --radius: 8px; --radius-lg: 12px; /* Sidebar */ --sidebar-width: 230px; --topbar-height: 56px; } /* --------------------------------------------------------------------------- */ /* Dark theme override — set data-theme="dark" on */ /* --------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Surfaces */ --bg: #080a12; --bg-elevated: #10131f; --bg-card: #151827; --border: #232838; /* Type */ --text: #e2e8f0; --text-muted: #94a3b8; /* Brand accents — same */ --accent: #2a93c1; --accent-2: #f1420b; --focus-ring: #4db6e0; /* Semantic */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; /* Shadow */ --shadow: 0 1px 3px rgba(0,0,0,0.4); /* Glass system — dark */ --glass-bg: rgba(16,19,31,0.60); --glass-border: rgba(255,255,255,0.09); --glass-blur: blur(18px) saturate(150%); --glass-shadow: 0 4px 32px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.07); --glass-radius: 14px; --glass-input-bg: rgba(8,10,18,0.70); } /* --------------------------------------------------------------------------- */ /* Background radial blob — atmospheric brand color behind all glass surfaces */ /* Applied to html so it is fixed behind everything. */ /* --------------------------------------------------------------------------- */ html { min-height: 100%; background: radial-gradient(ellipse 900px 650px at 8% 12%, rgba(42,147,193,0.10) 0%, transparent 65%), radial-gradient(ellipse 650px 750px at 90% 82%, rgba(241,66,11,0.06) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 60% 5%, rgba(42,147,193,0.05) 0%, transparent 55%), #ffffff; background-attachment: fixed; } html[data-theme="dark"] { background: radial-gradient(ellipse 900px 650px at 8% 12%, rgba(42,147,193,0.20) 0%, transparent 65%), radial-gradient(ellipse 650px 750px at 90% 82%, rgba(241,66,11,0.14) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 60% 5%, rgba(42,147,193,0.08) 0%, transparent 55%), #080a12; background-attachment: fixed; }