/*========================================================================== UNQUEST CAPITALS - DESIGN TOKENS Single source of truth for colour, type, elevation and shape. Load this BEFORE any other stylesheet. Brand seed: #3C3EA3 (hsl 239, 46%, 44%) Themes: light (default) + dark, via [data-theme] on . ===========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /*-------------------------------------------------------------------------- 1. PRIMITIVES - raw scales. Do not use these directly in components; reference the semantic tokens in section 2 instead. --------------------------------------------------------------------------*/ :root { /* Brand indigo - tonal ramp generated around #3C3EA3 */ --brand-50: #f3f3fc; --brand-100: #e4e5f9; --brand-200: #c4c5f5; --brand-300: #9d9ff0; --brand-400: #6c6ee7; --brand-500: #4e50d0; --brand-600: #3c3ea3; /* <- the brand colour */ --brand-700: #2e308a; --brand-800: #23246e; --brand-900: #1b1c55; --brand-950: #101137; /* Neutrals - very slightly indigo-tinted so they sit with the brand */ --n-0: #ffffff; --n-25: #fbfbfd; --n-50: #f6f7fb; --n-100: #eef0f6; --n-200: #e1e4ee; --n-300: #c9cddd; --n-400: #9aa0b8; --n-500: #6e7590; --n-600: #515873; --n-700: #3b415a; --n-800: #272c41; --n-900: #191d2e; --n-950: #0e1020; --n-1000: #080a14; /* Accent - restrained gold, for premium/plan highlights only */ --gold-300: #e6cd8b; --gold-400: #d4b45f; --gold-500: #bf9d43; --gold-600: #9a7c30; /* Financial semantics - gains, losses, pending */ --green-400: #34d399; --green-500: #10b981; --green-600: #059669; --green-700: #047857; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; /*---------------------------------------------------------------------- Type ----------------------------------------------------------------------*/ --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; /*---------------------------------------------------------------------- Shape ----------------------------------------------------------------------*/ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /*---------------------------------------------------------------------- Motion ----------------------------------------------------------------------*/ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.4s; /* Fixed layout metrics */ --sidebar-w: 260px; --topbar-h: 68px; } /*-------------------------------------------------------------------------- 2. SEMANTIC TOKENS - LIGHT (default) Components should only ever reference these. --------------------------------------------------------------------------*/ :root { color-scheme: light; --bg: var(--n-50); --bg-soft: var(--n-100); --bg-deep: var(--brand-950); --surface: var(--n-0); --surface-2: var(--n-50); --surface-3: var(--n-100); --surface-inset: var(--n-50); --surface-overlay: rgba(255, 255, 255, 0.92); --border: var(--n-200); --border-soft: var(--n-100); --border-strong: var(--n-300); --text: var(--n-900); --text-muted: var(--n-500); --text-subtle: var(--n-400); --text-inverse: var(--n-0); --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); --brand-on: #ffffff; --brand-soft: var(--brand-50); --brand-soft-hover: var(--brand-100); --brand-soft-border: var(--brand-200); --brand-soft-text: var(--brand-700); --brand-text: var(--brand-600); --ring: rgba(60, 62, 163, 0.32); --ring-offset: var(--n-0); --success: var(--green-600); --success-text: var(--green-700); --success-soft: #ecfdf5; --success-border: #a7f3d0; --danger: var(--red-600); --danger-text: var(--red-700); --danger-soft: #fef2f2; --danger-border: #fecaca; --warning: var(--amber-600); --warning-text: #92400e; --warning-soft: #fffbeb; --warning-border: #fde68a; --info: var(--sky-600); --info-text: #075985; --info-soft: #f0f9ff; --info-border: #bae6fd; --gold: var(--gold-500); --gold-soft: #fdf8ec; --gold-border: var(--gold-300); /* Navigation shell - deep indigo in both themes, it is a brand surface */ --nav-bg: var(--brand-950); --nav-bg-2: var(--brand-900); --nav-text: rgba(255, 255, 255, 0.72); --nav-text-active: #ffffff; --nav-item-hover: rgba(255, 255, 255, 0.07); --nav-item-active: var(--brand-600); --nav-border: rgba(255, 255, 255, 0.08); --topbar-bg: rgba(255, 255, 255, 0.85); --topbar-border: var(--n-200); /* Elevation - soft, layered, low-opacity */ --shadow-xs: 0 1px 2px rgba(16, 17, 55, 0.05); --shadow-sm: 0 1px 3px rgba(16, 17, 55, 0.06), 0 1px 2px rgba(16, 17, 55, 0.04); --shadow-md: 0 4px 12px rgba(16, 17, 55, 0.07), 0 2px 4px rgba(16, 17, 55, 0.04); --shadow-lg: 0 12px 28px rgba(16, 17, 55, 0.09), 0 4px 10px rgba(16, 17, 55, 0.04); --shadow-xl: 0 24px 56px rgba(16, 17, 55, 0.13), 0 8px 20px rgba(16, 17, 55, 0.06); --shadow-brand: 0 8px 24px rgba(60, 62, 163, 0.26); /* Signature gradients */ --grad-brand: linear-gradient(135deg, #4e50d0 0%, #3c3ea3 55%, #2e308a 100%); --grad-brand-soft: linear-gradient(135deg, #f3f3fc 0%, #e4e5f9 100%); --grad-deep: linear-gradient(155deg, #23246e 0%, #101137 100%); --grad-gold: linear-gradient(135deg, #e6cd8b 0%, #bf9d43 100%); --grad-sheen: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.16) 45%, transparent 70%); } /*-------------------------------------------------------------------------- 3. SEMANTIC TOKENS - DARK Duplicated across an explicit opt-in and a system-preference default so the toggle wins in both directions and JS is never required. --------------------------------------------------------------------------*/ :root[data-theme='dark'] { color-scheme: dark; --bg: var(--n-1000); --bg-soft: var(--n-950); --bg-deep: #000000; --surface: #12142a; --surface-2: #191c34; --surface-3: #21253f; --surface-inset: #0e1020; --surface-overlay: rgba(18, 20, 42, 0.92); --border: #262b46; --border-soft: #1c2036; --border-strong: #363c5c; --text: #eaecf7; --text-muted: #9aa0bd; --text-subtle: #6e7593; --text-inverse: var(--n-950); --brand: var(--brand-500); --brand-hover: var(--brand-400); --brand-active: var(--brand-300); --brand-on: #ffffff; --brand-soft: rgba(78, 80, 208, 0.14); --brand-soft-hover: rgba(78, 80, 208, 0.22); --brand-soft-border: rgba(108, 110, 231, 0.32); --brand-soft-text: var(--brand-300); --brand-text: var(--brand-300); --ring: rgba(108, 110, 231, 0.45); --ring-offset: #12142a; --success: var(--green-500); --success-text: var(--green-400); --success-soft: rgba(16, 185, 129, 0.13); --success-border: rgba(16, 185, 129, 0.3); --danger: var(--red-500); --danger-text: var(--red-400); --danger-soft: rgba(239, 68, 68, 0.13); --danger-border: rgba(239, 68, 68, 0.3); --warning: var(--amber-500); --warning-text: var(--amber-400); --warning-soft: rgba(245, 158, 11, 0.13); --warning-border: rgba(245, 158, 11, 0.3); --info: var(--sky-500); --info-text: var(--sky-400); --info-soft: rgba(14, 165, 233, 0.13); --info-border: rgba(14, 165, 233, 0.3); --gold: var(--gold-400); --gold-soft: rgba(212, 180, 95, 0.12); --gold-border: rgba(212, 180, 95, 0.32); --nav-bg: #0b0d1c; --nav-bg-2: #12142a; --nav-text: rgba(255, 255, 255, 0.66); --nav-text-active: #ffffff; --nav-item-hover: rgba(255, 255, 255, 0.06); --nav-item-active: var(--brand-600); --nav-border: rgba(255, 255, 255, 0.07); --topbar-bg: rgba(18, 20, 42, 0.85); --topbar-border: #262b46; /* On dark, elevation reads as a lighter rim rather than a cast shadow */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-brand: 0 8px 28px rgba(78, 80, 208, 0.4); --grad-brand: linear-gradient(135deg, #6c6ee7 0%, #4e50d0 55%, #3c3ea3 100%); --grad-brand-soft: linear-gradient(135deg, rgba(78, 80, 208, 0.16) 0%, rgba(60, 62, 163, 0.08) 100%); --grad-deep: linear-gradient(155deg, #191d2e 0%, #08090f 100%); --grad-gold: linear-gradient(135deg, #e6cd8b 0%, #bf9d43 100%); --grad-sheen: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { color-scheme: dark; --bg: var(--n-1000); --bg-soft: var(--n-950); --bg-deep: #000000; --surface: #12142a; --surface-2: #191c34; --surface-3: #21253f; --surface-inset: #0e1020; --surface-overlay: rgba(18, 20, 42, 0.92); --border: #262b46; --border-soft: #1c2036; --border-strong: #363c5c; --text: #eaecf7; --text-muted: #9aa0bd; --text-subtle: #6e7593; --text-inverse: var(--n-950); --brand: var(--brand-500); --brand-hover: var(--brand-400); --brand-active: var(--brand-300); --brand-on: #ffffff; --brand-soft: rgba(78, 80, 208, 0.14); --brand-soft-hover: rgba(78, 80, 208, 0.22); --brand-soft-border: rgba(108, 110, 231, 0.32); --brand-soft-text: var(--brand-300); --brand-text: var(--brand-300); --ring: rgba(108, 110, 231, 0.45); --ring-offset: #12142a; --success: var(--green-500); --success-text: var(--green-400); --success-soft: rgba(16, 185, 129, 0.13); --success-border: rgba(16, 185, 129, 0.3); --danger: var(--red-500); --danger-text: var(--red-400); --danger-soft: rgba(239, 68, 68, 0.13); --danger-border: rgba(239, 68, 68, 0.3); --warning: var(--amber-500); --warning-text: var(--amber-400); --warning-soft: rgba(245, 158, 11, 0.13); --warning-border: rgba(245, 158, 11, 0.3); --info: var(--sky-500); --info-text: var(--sky-400); --info-soft: rgba(14, 165, 233, 0.13); --info-border: rgba(14, 165, 233, 0.3); --gold: var(--gold-400); --gold-soft: rgba(212, 180, 95, 0.12); --gold-border: rgba(212, 180, 95, 0.32); --nav-bg: #0b0d1c; --nav-bg-2: #12142a; --nav-text: rgba(255, 255, 255, 0.66); --nav-text-active: #ffffff; --nav-item-hover: rgba(255, 255, 255, 0.06); --nav-item-active: var(--brand-600); --nav-border: rgba(255, 255, 255, 0.07); --topbar-bg: rgba(18, 20, 42, 0.85); --topbar-border: #262b46; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-brand: 0 8px 28px rgba(78, 80, 208, 0.4); --grad-brand: linear-gradient(135deg, #6c6ee7 0%, #4e50d0 55%, #3c3ea3 100%); --grad-brand-soft: linear-gradient(135deg, rgba(78, 80, 208, 0.16) 0%, rgba(60, 62, 163, 0.08) 100%); --grad-deep: linear-gradient(155deg, #191d2e 0%, #08090f 100%); --grad-gold: linear-gradient(135deg, #e6cd8b 0%, #bf9d43 100%); --grad-sheen: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%); } } /*-------------------------------------------------------------------------- 4. LEGACY ALIASES The old stylesheets and a number of inline styles still reference these names. Mapping them here re-themes that markup without touching it. --------------------------------------------------------------------------*/ :root { --primary-blue: var(--brand); --secondary-blue: var(--brand-hover); --accent-blue: var(--brand-500); --dark-bg: var(--nav-bg); --card-bg: var(--surface); --text-main: var(--text); --grad-blue: var(--grad-brand); } /*-------------------------------------------------------------------------- 5. THEME TRANSITION Animate the swap, but never fight a user who asked for less motion, and never animate on first paint. --------------------------------------------------------------------------*/ :root.theme-ready body, :root.theme-ready body * { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } :root.theme-ready body *::before, :root.theme-ready body *::after { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (prefers-reduced-motion: reduce) { :root.theme-ready body, :root.theme-ready body *, :root.theme-ready body *::before, :root.theme-ready body *::after { transition: none !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }