/* ============================================================================ Compounder — Design Tokens (single source of truth) Used by: app (app.html), marketing (index.html), legal (legal/*.html). Canonical brand accent: purple #6d4aff. Fonts: Geist (body) + Bricolage (display). Theme: default dark (set via before paint) with a light theme and a prefers-color-scheme fallback. ========================================================================== */ /* ---- Brand fonts (the only @font-face in the product) ------------------- */ @font-face{font-family:"Bricolage";src:url("../fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;} @font-face{font-family:"Bricolage";src:url("../fonts/bricolage-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Geist";src:url("../fonts/geist-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Geist";src:url("../fonts/geist-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Geist";src:url("../fonts/geist-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"Geist";src:url("../fonts/geist-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} /* ---- Light theme (default color-scheme) --------------------------------- */ :root { color-scheme: light; /* Surfaces & neutrals */ --bg: #f4f5f8; --surface: #ffffff; --surface-2: #eef0f4; --surface-3: #e6e9ef; --panel: #ffffff; --panel-strong: #ffffff; --border: #e4e7ec; --border-strong: #d4d9e1; --hairline: #edeff3; --text: #14161b; --text-2: #3c424e; --muted: #6a7280; --muted-2: #939aa7; /* Accent — canonical brand purple */ --accent: #6d4aff; --accent-strong: #5a37e6; --accent-soft: rgba(109, 74, 255, 0.09); --accent-ring: rgba(109, 74, 255, 0.22); --on-accent: #ffffff; /* Secondary — amber (intrinsic value, moderate, warnings) */ --accent-2: #b7791f; --accent-2-soft: rgba(183, 121, 31, 0.13); /* Semantic */ --positive: #0e9f6e; --positive-soft: rgba(14, 159, 110, 0.12); --negative: #dc2626; --negative-soft: rgba(220, 38, 38, 0.10); /* Warning (legal callouts) */ --warn: #8a5a11; --warn-bg: rgba(183, 121, 31, 0.12); /* Chart helpers (also read as literals in app.js) */ --chart-line: #6d4aff; --chart-line-2: #b7791f; --chart-grid: rgba(20, 22, 27, 0.07); --chart-ink: #14161b; /* Brand gradient (CompAI, upgrade CTAs) */ --grad-brand: linear-gradient(140deg, #4b57ff 0%, var(--accent) 50%, #8b5cf6 100%); /* Radii */ --r-xs: 5px; --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* Spacing scale (migrate raw px paddings/margins/gaps to these) */ --space-0: 0; --space-px: 1px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --space-20: 40px; --space-24: 48px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.05); --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05); --shadow-lg: 0 8px 28px rgba(16, 24, 40, 0.12); --shadow-xl: 0 24px 60px rgba(20, 24, 40, 0.14); /* Transitions */ --transition-fast: 120ms ease; --transition: 150ms ease; /* Type */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-display: "Bricolage", "Geist", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; /* Breakpoints (documentation — CSS custom props can't be used in @media): --bp-sm: 640px · --bp-md: 900px · --bp-lg: 1080px */ /* ---- Compatibility aliases (legacy names still used in the source) ---- */ /* marketing (index.html) / legal (legal.css) short names */ --pos: var(--positive); --pos-soft: var(--positive-soft); --neg: var(--negative); --gold: var(--accent-2); --border-2: var(--border-strong); --font-body: var(--font-sans); /* NOTE: --shadow, --shadow-sm and --r differ in meaning between app and marketing; those usages are rewritten to canonical tokens during extraction rather than aliased here. */ /* app (styles.css) legacy aliases — kept so existing class names resolve */ --app-side-nav-border: var(--border); --app-side-nav-bg: var(--surface); --app-nav-item-border: transparent; --app-nav-item-bg: transparent; --app-nav-item-hover: var(--surface-2); --app-nav-item-active: var(--accent-soft); --app-text-soft: var(--muted); --app-accent-strong: var(--accent); } /* ---- Dark theme — navy surfaces + brighter purple ---------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0d13; --surface: #151824; --surface-2: #1c2130; --surface-3: #262c3d; --panel: #151824; --panel-strong: #1c2130; --border: #262c3d; --border-strong: #363f52; --hairline: #1e2331; --text: #eef1f7; --text-2: #c4cad7; --muted: #98a2b3; --muted-2: #6b7385; --accent: #8b7dff; --accent-strong: #a99cff; --accent-soft: rgba(139, 125, 255, 0.15); --accent-ring: rgba(139, 125, 255, 0.32); --on-accent: #ffffff; --accent-2: #dcb35a; --accent-2-soft: rgba(220, 179, 90, 0.16); --positive: #34d399; --positive-soft: rgba(52, 211, 153, 0.15); --negative: #f87171; --negative-soft: rgba(248, 113, 113, 0.15); --warn: #d6a23a; --warn-bg: rgba(214, 162, 58, 0.14); --chart-line: #8b7dff; --chart-line-2: #dcb35a; --chart-grid: rgba(255, 255, 255, 0.06); --chart-ink: #eef1f7; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6); --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.55); } /* ---- prefers-color-scheme fallback (only when no explicit data-theme) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: #0b0d13; --surface: #151824; --surface-2: #1c2130; --surface-3: #262c3d; --panel: #151824; --panel-strong: #1c2130; --border: #262c3d; --border-strong: #363f52; --hairline: #1e2331; --text: #eef1f7; --text-2: #c4cad7; --muted: #98a2b3; --muted-2: #6b7385; --accent: #8b7dff; --accent-strong: #a99cff; --accent-soft: rgba(139, 125, 255, 0.15); --accent-ring: rgba(139, 125, 255, 0.32); --accent-2: #dcb35a; --accent-2-soft: rgba(220, 179, 90, 0.16); --positive: #34d399; --positive-soft: rgba(52, 211, 153, 0.15); --negative: #f87171; --negative-soft: rgba(248, 113, 113, 0.15); --warn: #d6a23a; --warn-bg: rgba(214, 162, 58, 0.14); --chart-line: #8b7dff; --chart-line-2: #dcb35a; --chart-grid: rgba(255, 255, 255, 0.06); --chart-ink: #eef1f7; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6); --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.55); } } /* ============================================================================ Modern UI refresh — premium financial command center (2026-07-09) Additive token layer: keeps legacy aliases while giving app surfaces a more precise graphite/purple dashboard feel. ========================================================================== */ :root { --ui-accent-purple: #8b7dff; --ui-accent-blue: #a78bfa; --ui-signal-gold: #c8a96b; --ui-panel-glow: 0 0 0 1px rgba(139, 125, 255, 0.08), 0 18px 45px rgba(15, 23, 34, 0.12); --ui-shadow-premium: 0 18px 45px rgba(16, 24, 40, 0.10), 0 1px 0 rgba(255, 255, 255, 0.72) inset; --ui-shadow-premium-hover: 0 22px 60px rgba(16, 24, 40, 0.14), 0 1px 0 rgba(255, 255, 255, 0.84) inset; --ui-border-soft: rgba(148, 163, 184, 0.24); --ui-border-strong: rgba(100, 116, 139, 0.36); --ui-focus: rgba(139, 125, 255, 0.34); } :root[data-theme="dark"] { --bg: #0b1117; --surface: #0f1722; --surface-2: #121c28; --surface-3: #1a2a3b; --panel: #121c28; --panel-strong: #162231; --border: rgba(148, 163, 184, 0.16); --border-strong: rgba(148, 163, 184, 0.28); --hairline: rgba(148, 163, 184, 0.10); --text: #e8eef5; --text-2: #a6b4c3; --muted: #7d8b99; --muted-2: #657280; --accent: #8b7dff; --accent-strong: #a99cff; --accent-soft: rgba(139, 125, 255, 0.14); --accent-ring: rgba(139, 125, 255, 0.34); --accent-2: #c8a96b; --accent-2-soft: rgba(200, 169, 107, 0.16); --positive: #22c55e; --positive-soft: rgba(34, 197, 94, 0.14); --negative: #f05d5e; --negative-soft: rgba(240, 93, 94, 0.14); --warn: #f2b94b; --warn-bg: rgba(242, 185, 75, 0.14); --chart-line: #8b7dff; --chart-line-2: #c8a96b; --chart-grid: rgba(148, 163, 184, 0.10); --chart-ink: #e8eef5; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.34); --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22); --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.28); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.36); --shadow-xl: 0 32px 90px rgba(0, 0, 0, 0.42); --ui-panel-glow: 0 0 0 1px rgba(139, 125, 255, 0.10), 0 22px 55px rgba(0, 0, 0, 0.28); --ui-shadow-premium: 0 18px 48px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.045) inset; --ui-shadow-premium-hover: 0 24px 68px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(255, 255, 255, 0.07) inset; --ui-border-soft: rgba(148, 163, 184, 0.18); --ui-border-strong: rgba(148, 163, 184, 0.32); --ui-focus: rgba(139, 125, 255, 0.34); --grad-brand: linear-gradient(135deg, #4c2ccf 0%, #8b7dff 48%, #a78bfa 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0b1117; --surface: #0f1722; --surface-2: #121c28; --surface-3: #1a2a3b; --panel: #121c28; --panel-strong: #162231; --border: rgba(148, 163, 184, 0.16); --border-strong: rgba(148, 163, 184, 0.28); --hairline: rgba(148, 163, 184, 0.10); --text: #e8eef5; --text-2: #a6b4c3; --muted: #7d8b99; --muted-2: #657280; --accent: #8b7dff; --accent-strong: #a99cff; --accent-soft: rgba(139, 125, 255, 0.14); --accent-ring: rgba(139, 125, 255, 0.34); --accent-2: #c8a96b; --accent-2-soft: rgba(200, 169, 107, 0.16); --chart-line: #8b7dff; --chart-line-2: #c8a96b; --ui-panel-glow: 0 0 0 1px rgba(139, 125, 255, 0.10), 0 22px 55px rgba(0, 0, 0, 0.28); --ui-shadow-premium: 0 18px 48px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.045) inset; } }