/* Reforecast — design tokens. Lifted from the Reforecast Executive Suite prototype (claude.ai/design project 019de81c-0370-740e-921c-392b69155829) so the live UI matches the visual contract one-to-one. Light is the default. The user's choice is persisted in a cookie (`reforecast-theme`) and written onto server-side in _Layout.cshtml so there is no flash of light content for dark users. */ :root { /* Surfaces */ --bg-page: #F8FAFC; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-sunken: #F1F5F9; /* Borders */ --border-subtle: #E2E8F0; --border-strong: #CBD5E1; /* Text */ --text-primary: #0F172A; --text-secondary: #1E293B; --text-muted: #64748B; --text-faint: #94A3B8; --text-inverse: #FFFFFF; /* Accent */ --accent: #1E40AF; --accent-hover: #1E3A8A; --accent-2: #2563EB; --accent-on: #FFFFFF; --accent-soft: #EFF6FF; --accent-border: #BFDBFE; /* Status */ --success: #059669; --success-soft: #ECFDF5; --success-border: #A7F3D0; --success-strong: #065F46; --warning: #D97706; --warning-soft: #FFFBEB; --warning-border: #FDE68A; --warning-strong: #92400E; --danger: #DC2626; --danger-soft: #FEF2F2; --danger-border: #FECACA; --danger-strong: #991B1B; /* Charts */ --chart-1: #1E40AF; --chart-2: #059669; --chart-3: #DC2626; --chart-4: #B91C1C; --chart-5: #4F46E5; --chart-6: #94A3B8; --chart-grid: #F1F5F9; --chart-axis: #94A3B8; --chart-marker: #0F172A; /* Sidebar (dark in light theme too — only deepens slightly in dark mode) */ --sidebar-bg: #0F172A; --sidebar-bg-2: #1E293B; --sidebar-text: #94A3B8; --sidebar-text-active: #FFFFFF; --sidebar-text-muted: #64748B; --sidebar-text-strong: #E2E8F0; --sidebar-text-soft: #CBD5E1; --sidebar-active-bg: rgba(37, 99, 235, 0.14); --sidebar-active-border: rgba(96, 165, 250, 0.18); --sidebar-active-ico: #93C5FD; --sidebar-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-card-bg: rgba(255, 255, 255, 0.03); --sidebar-card-border: rgba(255, 255, 255, 0.06); /* Pill / status soft chrome — used on nav pills, status pills, sync rows. The light values match what the live app already used; the dark overrides drop them into translucent equivalents so they stay legible on dark surfaces. */ --pill-amber-bg: #FEF3C7; --pill-amber-fg: #92400E; --pill-amber-border: #FDE68A; --pill-blue-bg: #DBEAFE; --pill-blue-fg: #1E3A8A; --pill-green-bg: #DCFCE7; --pill-green-fg: #065F46; --pill-purple-bg: #EDE9FE; --pill-purple-fg: #5B21B6; --pill-red-bg: #FEE2E2; --pill-red-fg: #991B1B; /* DD-suite warm surfaces — used for table totals columns, subtotal rows, card heads, and future-cell hatch. Light values mirror what _dd.css originally baked via --bg-page / --bg-sunken, so light mode is visually identical; the dark overrides below lift these one notch above the page background so totals stay readable on dark. */ --surface-warm: #F8FAFC; --surface-warm-2: #F1F5F9; --surface-warm-head: #F8FAFC; --row-divider: #E2E8F0; --hatch: #E2E8F0; --neg-row-bg: rgba(220, 38, 38, 0.04); --neg-row-bg-hover: rgba(220, 38, 38, 0.07); /* Derived-row total accents — same hue as the row body but deeper, so the year-total cell visibly lifts above the row cells. Light values match the existing --pill-blue-bg / --pill-purple-bg so light mode is byte-identical; dark overrides use the same hue as --primary-soft / --purple-soft at higher alpha (matches the design's prototype). */ --primary-soft-2: #DBEAFE; --derived-profit-bg-2: #EDE9FE; /* DD director-avatar palette — referenced via inline style by AvatarPalette() in Dashboard.cshtml.cs. Splitting into tokens lets the avatar circles flip from pastel to translucent-on-dark. */ --avatar-green-bg: #DCFCE7; --avatar-green-fg: #166534; --avatar-blue-bg: #DBEAFE; --avatar-blue-fg: #1E40AF; --avatar-amber-bg: #FEF3C7; --avatar-amber-fg: #92400E; --avatar-default-bg: #F1F5F9; --avatar-default-fg: #64748B; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --radius: 10px; --radius-sm: 8px; --radius-lg: 12px; /* Legacy aliases — many shared CSS rules still reference these short names. They resolve to the canonical tokens above so the dark-mode override block (below) doesn't have to mention them twice. */ --bg: var(--bg-page); --surface: var(--bg-surface); --border: var(--border-subtle); --ink: var(--text-primary); --ink-2: var(--text-secondary); --muted: var(--text-muted); --muted-2: var(--text-faint); --sidebar: var(--sidebar-bg); --sidebar-2: var(--sidebar-bg-2); --sidebar-ink: var(--sidebar-text-strong); --sidebar-muted: var(--sidebar-text-muted); --primary: var(--accent); --primary-2: var(--accent-2); --primary-soft: var(--accent-soft); --primary-border: var(--accent-border); --pos: var(--success); --pos-soft: var(--success-soft); --pos-border: var(--success-border); --neg: var(--danger); --neg-soft: var(--danger-soft); --neg-border: var(--danger-border); --amber: var(--warning); --amber-soft: var(--warning-soft); --amber-border: var(--warning-border); --purple: #6D28D9; --purple-soft: #F5F3FF; --purple-border: #DDD6FE; } [data-theme="dark"] { --bg-page: #0B1220; --bg-surface: #111827; --bg-elevated: #1B2434; --bg-sunken: #0A101C; --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text-primary: #F1F5F9; --text-secondary: #E2E8F0; --text-muted: #94A3B8; --text-faint: #64748B; --text-inverse: #0F172A; --accent: #3B82F6; --accent-hover: #60A5FA; --accent-2: #60A5FA; --accent-on: #0B1220; --accent-soft: rgba(59, 130, 246, 0.16); --accent-border: rgba(96, 165, 250, 0.32); --success: #34D399; --success-soft: rgba(52, 211, 153, 0.14); --success-border: rgba(52, 211, 153, 0.28); --success-strong: #A7F3D0; --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.14); --warning-border: rgba(251, 191, 36, 0.28); --warning-strong: #FDE68A; --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.14); --danger-border: rgba(248, 113, 113, 0.28); --danger-strong: #FCA5A5; --chart-1: #60A5FA; --chart-2: #34D399; --chart-3: #F87171; --chart-4: #FB7185; --chart-5: #A78BFA; --chart-6: #94A3B8; --chart-grid: rgba(255, 255, 255, 0.06); --chart-axis: #64748B; --chart-marker: #F1F5F9; --sidebar-bg: #070B14; --sidebar-bg-2: #0F172A; --sidebar-active-bg: rgba(59, 130, 246, 0.22); --sidebar-active-border: rgba(96, 165, 250, 0.28); --sidebar-active-ico: #93C5FD; --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-card-bg: rgba(255, 255, 255, 0.04); --sidebar-card-border: rgba(255, 255, 255, 0.08); --pill-amber-bg: rgba(251, 191, 36, 0.16); --pill-amber-fg: #FDE68A; --pill-amber-border: rgba(251, 191, 36, 0.32); --pill-blue-bg: rgba(96, 165, 250, 0.18); --pill-blue-fg: #93C5FD; --pill-green-bg: rgba(52, 211, 153, 0.16); --pill-green-fg: #A7F3D0; --pill-purple-bg: rgba(167, 139, 250, 0.18); --pill-purple-fg: #C4B5FD; --pill-red-bg: rgba(248, 113, 113, 0.18); --pill-red-fg: #FCA5A5; --surface-warm: #131D2F; --surface-warm-2: #18233A; --surface-warm-head: #131C2E; --row-divider: #1F2A3D; --hatch: #1B273B; --neg-row-bg: rgba(248, 113, 113, 0.08); --neg-row-bg-hover: rgba(248, 113, 113, 0.14); /* Same blue/purple hue as --primary-soft / --purple-soft, deeper alpha so the year-total cell on derived rows clearly lifts above the body cells. Mirrors the design prototype's --primary-soft-2 / --derived-profit-bg-2 dark values exactly. */ --primary-soft-2: rgba(59, 130, 246, 0.22); --derived-profit-bg-2: rgba(139, 92, 246, 0.22); /* In dark mode the deep-purple --purple (#6D28D9) becomes nearly unreadable against the translucent --purple-soft. Override to a light-purple text colour. Light mode keeps #6D28D9. */ --purple: #C4B5FD; --purple-soft: rgba(139, 92, 246, 0.16); --purple-border: rgba(139, 92, 246, 0.32); --avatar-green-bg: rgba(16, 185, 129, 0.22); --avatar-green-fg: #86EFAC; --avatar-blue-bg: rgba(59, 130, 246, 0.22); --avatar-blue-fg: #93C5FD; --avatar-amber-bg: rgba(245, 158, 11, 0.22); --avatar-amber-fg: #FDE68A; --avatar-default-bg: rgba(255, 255, 255, 0.06); --avatar-default-fg: #94A3B8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.48), 0 2px 6px rgba(0, 0, 0, 0.32); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.45; transition: background-color .18s ease, color .18s ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* Theme toggle pill — lives at the top of the sidebar foot, just above the Data Health card. Matches the prototype's small icon+label pill on the dark sidebar in both themes. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: var(--sidebar-card-bg); border: 1px solid var(--sidebar-card-border); color: var(--sidebar-text-strong); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; letter-spacing: 0.01em; transition: background .15s, color .15s, border-color .15s; } .theme-toggle:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); border-color: var(--sidebar-active-border); } .theme-toggle .theme-toggle-ico { display: inline-flex; align-items: center; color: var(--sidebar-text); } .theme-toggle:hover .theme-toggle-ico { color: var(--accent-2); } .theme-toggle .theme-toggle-ico svg { width: 14px; height: 14px; display: block; }