/* ============================================ RetireIQ Design System - Theme Variables ============================================ Three themes: mixed (default), dark, light Applied via [data-theme] attribute on ============================================ */ /* ============================================ Local fonts — no external network requests ============================================ */ /* Material Symbols Outlined — served from local fonts/ directory */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; src: url('../fonts/material-symbols-outlined.woff2') format('woff2'); } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } :root { /* ========================================== FONT SYSTEM ========================================== */ --font-display: 'Figtree', sans-serif; /* Font weights — controlled by active design theme via applyDesignTheme() */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ========================================== TYPOGRAPHY SCALE ========================================== */ --text-2xl: 2rem; /* Page titles (h1) - 32px */ --text-xl: 1.5rem; /* Section headings - 24px */ --text-lg: 1.25rem; /* Card headings (h3) - 20px */ --text-base: 1.0625rem; /* Body text, form inputs - 17px */ --text-sm: 0.9375rem; /* Labels, secondary text - 15px */ --text-xs: 0.875rem; /* Badges, small labels - 14px */ --text-2xs: 0.8125rem; /* Uppercase micro labels, stat card headers - 13px */ /* ========================================== SPACING SCALE (4px increments) ========================================== */ --sp-1: 0.25rem; /* 4px - Tight gaps, icon margins */ --sp-2: 0.5rem; /* 8px - Input padding, small gaps */ --sp-3: 0.75rem; /* 12px - Card internal padding (compact) */ --sp-4: 1rem; /* 16px - Standard card padding, gaps */ --sp-5: 1.25rem; /* 20px - Card padding (stat cards) */ --sp-6: 1.5rem; /* 24px - Section margins, chart padding */ --sp-8: 2rem; /* 32px - Page-level padding (desktop) */ /* ========================================== BORDER RADIUS ========================================== */ --radius: 0.25rem; /* 4px - Inputs, small elements */ --radius-lg: 0.5rem; /* 8px - Buttons, tags, nav items */ --radius-xl: 0.75rem; /* 12px - Cards, chart containers */ --radius-2xl: 1rem; /* 16px - Large cards, modals */ --radius-full: 9999px; /* Pill buttons */ /* ========================================== TRANSITIONS ========================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ========================================== PRIMARY COLORS ========================================== */ --primary: #00B577; --primary-dark: #008f5d; --primary-light: #d1fae5; /* Legacy aliases (backward compatibility) */ --accent: var(--primary); --accent-light: var(--primary-dark); --accent-dark: var(--primary-dark); --accent-subtle: var(--primary-light); /* ========================================== SIDEBAR (dark region - mixed theme) ========================================== */ --sidebar-bg: #2D3748; --sidebar-hover: #4A5568; --sidebar-border: #4A5568; --sidebar-text: #CBD5E1; --sidebar-text-active: #FFFFFF; --sidebar-divider: #4A5568; /* ========================================== CONTENT SURFACES ========================================== */ --page-bg: #f8fafc; --surface-card: #ffffff; --border-subtle: #cbd5e1; /* Legacy aliases */ --cream: var(--page-bg); --cream-dark: #e2e8f0; --cream-darker: var(--border-subtle); --border-color: var(--border-subtle); --border-light: #e2e8f0; /* ========================================== TEXT COLORS ========================================== */ --text-main: #0f172a; --text-secondary: #475569; --text-muted: #64748b; /* Legacy aliases */ --ink: var(--text-main); --ink-light: var(--text-secondary); --ink-muted: var(--text-muted); /* ========================================== SHADOWS ========================================== */ --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-card-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-primary: 0 4px 14px rgba(0, 181, 119, 0.2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* Legacy aliases */ --shadow: rgba(0, 0, 0, 0.08); --shadow-strong: rgba(0, 0, 0, 0.15); --shadow-subtle: rgba(0, 0, 0, 0.04); /* ========================================== SEMANTIC COLORS ========================================== */ --success: #10B981; --success-light: #D1FAE5; --success-dark: #059669; --warning: #F59E0B; --warning-light: #FEF3C7; --warning-dark: #D97706; --danger: #EF4444; --danger-light: #FEE2E2; --danger-dark: #DC2626; --info: #3B82F6; --info-light: #DBEAFE; --info-dark: #2563EB; /* ========================================== ACCOUNT TYPE COLORS ========================================== */ --taxable: #00B677; --ira: #9CBA51; --roth: #FFB040; --spouse-ira: #FD7E55; --spouse-roth: #FD665F; --social-security: #0BB774; /* ========================================== CHART PALETTE ========================================== */ --chart-primary: #00B677; --chart-primary-light: rgba(0, 182, 119, 0.25); --chart-lime: #56B863; --chart-olive: #9CBA51; --chart-gold: #E3BD41; --chart-amber: #FFB040; --chart-orange: #FE964B; --chart-salmon: #FD7E55; --chart-coral: #FD665F; --chart-green: #00B677; /* ========================================== SPOUSE / SECONDARY COLORS ========================================== */ --spouse-primary: #FD7E55; --spouse-secondary: #FD665F; /* ========================================== SPECIAL PURPOSE COLORS ========================================== */ --monte-carlo: #56B863; --employment-primary: #56B863; --employment-spouse: #FE964B; --conversion: var(--roth); --tax-paid: #FD665F; --expenses: #E3BD41; } /* ============================================ FULL DARK THEME ============================================ */ [data-theme="dark"] { --primary: #00B577; --primary-dark: #009461; --primary-light: #d1fae5; --sidebar-bg: #1A202C; --sidebar-hover: #2D3748; --sidebar-border: #2D3748; --sidebar-text: #9CA3AF; --sidebar-text-active: #FFFFFF; --sidebar-divider: #374151; --page-bg: #111827; --surface-card: #1F2937; --border-subtle: #374151; --cream: #111827; --cream-dark: #1F2937; --cream-darker: #374151; --border-color: #374151; --border-light: #374151; --text-main: #F9FAFB; --text-secondary: #9CA3AF; --text-muted: #6B7280; --ink: #F9FAFB; --ink-light: #9CA3AF; --ink-muted: #6B7280; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); --shadow: rgba(0, 0, 0, 0.3); --shadow-strong: rgba(0, 0, 0, 0.5); --shadow-subtle: rgba(0, 0, 0, 0.15); /* Account colors — same gradient works well on dark backgrounds */ --taxable: #00B677; --ira: #9CBA51; --roth: #FFB040; --spouse-ira: #FD7E55; --spouse-roth: #FD665F; --accent: #00B577; --accent-light: #009461; --accent-dark: #009461; } /* ============================================ FULL LIGHT THEME ============================================ */ [data-theme="light"] { --primary: #00B577; --primary-dark: #00915f; --primary-light: #d1fae5; --sidebar-bg: #ffffff; --sidebar-hover: rgba(0, 181, 119, 0.05); --sidebar-border: #e5e7eb; --sidebar-text: #4b5563; --sidebar-text-active: #00915f; --sidebar-divider: #e5e7eb; --page-bg: #f5f8f7; --surface-card: #ffffff; --border-subtle: #e5e7eb; --cream: #f5f8f7; --cream-dark: #e5e7eb; --cream-darker: #d1d5db; --border-color: #e5e7eb; --border-light: #f3f4f6; --text-main: #111827; --text-secondary: #4b5563; --text-muted: #9ca3af; --ink: #111827; --ink-light: #4b5563; --ink-muted: #9ca3af; --shadow-card: 0 1px 3px 0 rgba(0, 181, 119, 0.05), 0 1px 2px 0 rgba(0, 181, 119, 0.03); --shadow-card-hover: 0 10px 15px -3px rgba(0, 181, 119, 0.1), 0 4px 6px -2px rgba(0, 181, 119, 0.05); } /* ============================================ SCROLLBAR THEMING ============================================ */ /* Light / Mixed scrollbars */ * { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Dark scrollbars */ [data-theme="dark"] * { scrollbar-color: #374151 #111827; } [data-theme="dark"] *::-webkit-scrollbar-track { background: #111827; } [data-theme="dark"] *::-webkit-scrollbar-thumb { background: #374151; } [data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #4B5563; } /* ============================================ THEME UTILITIES ============================================ */ .theme-accent-bg { background-color: var(--primary); } .theme-accent-text { color: var(--primary); } .theme-accent-border { border-color: var(--primary); } .theme-success { color: var(--success); } .theme-warning { color: var(--warning); } .theme-danger { color: var(--danger); } .theme-info { color: var(--info); } .theme-success-bg { background-color: var(--success-light); } .theme-warning-bg { background-color: var(--warning-light); } .theme-danger-bg { background-color: var(--danger-light); } .theme-info-bg { background-color: var(--info-light); }