/* ========================================================= CT Dashboards — Theme Tokens Electric blue Operator Stellar system. Active palette is controlled by . Legacy var names are preserved as aliases for iframe dashboards that haven't been migrated yet. ========================================================= */ @import url('palettes.css'); /* ───────────────────────────────────────────────────────── LIGHT MODE — default ───────────────────────────────────────────────────────── */ :root { /* Semantic surface tokens */ --bg: #F7F9FC; --surface: #FFFFFF; --surface-2: #F0F4FA; --surface-3: #E8EEF7; --border: #E1E8F2; --border-2: #CFDAE9; --border-strong: #CFDAE9; /* Typography */ --text: #08111F; --text-2: #25334A; --text-3: #5B6B82; --text-4: #94A1B8; --text-5: #C1CADB; --text-soft: var(--text-2); --muted: var(--text-3); --muted-2: var(--text-4); /* Semantic color states */ --green: #10B981; --green-soft: rgba(16, 185, 129, 0.10); --red: #EF4444; --red-soft: rgba(239, 68, 68, 0.10); --amber: #F59E0B; --amber-soft: rgba(245, 158, 11, 0.12); --txt-green: #059669; --txt-red: #DC2626; --txt-amber: #D97706; /* Grant type palette — Pill Family (light mode, deeper for white bg) */ --gt-mega: #DB2777; /* rose */ --gt-strategic: #7C3AED; /* violet */ --gt-impact: #059669; /* emerald */ --gt-collaboration: #0891B2; /* cyan */ --gt-theme: #D97706; /* amber */ --gt-standard: #2563EB; /* periwinkle (brand) */ --fg-green: var(--green-soft); --fg-red: var(--red-soft); --fg-amber: var(--amber-soft); --fg-neutral: rgba(8, 17, 31, 0.06); /* ─── Legacy aliases (iframe dashboards expect these) ─── */ --brand-navy: var(--a); --brand-navy-600: var(--a-2); --brand-navy-400: var(--a-3); --brand-navy-700: #1E40AF; --brand-gold: var(--ld); --brand-gold-dark: #1E1B6B; /* Legacy chart palette — keep existing hex values for legacy charts */ --c-cpe: var(--cpe); --c-ld: var(--ld); --c-rm: var(--rm); --c-orange: #FFA766; --c-green: #059669; --c-purple: #DB9BDD; --c-blue: #8DB5F8; --c-red: #E74C3C; /* Card / background */ --card: var(--surface); --card-hover: var(--surface-2); /* Hero gradient + sheen */ --header-grad: linear-gradient(135deg, #1E40AF 0%, var(--a) 50%, var(--a-2) 100%); --header-sheen: radial-gradient(1200px 400px at 20% -40%, rgba(37, 99, 235, 0.18), transparent 60%); --hero-on-navy: #FFFFFF; /* Shadow tokens */ --shadow: 0 1px 2px rgba(8, 17, 31, 0.04); --shadow-sm: 0 1px 2px rgba(8, 17, 31, 0.04); --shadow-md: 0 4px 16px rgba(8, 17, 31, 0.06); --shadow-lg: 0 18px 44px rgba(8, 17, 31, 0.12); --shadow-2: var(--shadow-md); --shadow-gold: 0 10px 30px rgba(37, 99, 235, 0.18); --shadow-a: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 28px rgba(37, 99, 235, 0.25); --grid-line: rgba(8, 17, 31, 0.06); /* Legacy next-gen variables — kept for financial_analysis.html */ --ng-bg: linear-gradient(135deg, #FFFBF0 0%, #FFF3D6 100%); --ng-border: #E9C75B; --ng-text: #6E4E00; --ng-text-soft: #8C6A12; --ng-track: rgba(217, 168, 0, 0.18); /* Radius scale */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; /* Bg pattern for legacy hero sections */ --bg-pattern: radial-gradient(1200px 600px at 80% -200px, rgba(37, 99, 235, 0.06), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(55, 48, 163, 0.05), transparent 55%); } /* ───────────────────────────────────────────────────────── DARK MODE — earth from orbit ───────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0C1220; --surface: #111827; --surface-2: #172035; --surface-3: #1E2A42; --border: #1F2E47; --border-2: #28395A; --border-strong: #28395A; --text: #F1F5FB; --text-2: #C5CFE0; --text-3: #7A8BA5; --text-4: #4E5D77; --text-5: #323D52; --text-soft: var(--text-2); --muted: var(--text-3); --muted-2: var(--text-4); --green: #34D399; --green-soft: rgba(52, 211, 153, 0.14); --red: #F87171; --red-soft: rgba(248, 113, 113, 0.14); --amber: #FBBF24; --amber-soft: rgba(251, 191, 36, 0.14); --txt-green: #34D399; --txt-red: #F87171; --txt-amber: #FBBF24; /* Grant type palette — Pill Family (dark mode). Matches the .ct-gt-tag pill colors so donut, stacker, type cards, and pills all share one palette. Mixed hues for strong categorical distinction. Standard takes the brand periwinkle (biggest slice gets the anchor color). */ --gt-mega: #F472B6; /* rose-pink */ --gt-strategic: #A78BFA; /* soft violet */ --gt-impact: #34D399; /* emerald */ --gt-collaboration: #22D3EE; /* cyan */ --gt-theme: #FBBF24; /* amber */ --gt-standard: #4D7BFF; /* periwinkle (brand) */ --fg-green: var(--green-soft); --fg-red: var(--red-soft); --fg-amber: var(--amber-soft); --fg-neutral: rgba(255, 255, 255, 0.06); --brand-navy: var(--a); --brand-navy-600: var(--a-2); --brand-navy-400: var(--a-3); --brand-navy-700: #1E40AF; --brand-gold: var(--ld); --brand-gold-dark: #C4B5FD; --c-cpe: var(--cpe); --c-ld: var(--ld); --c-rm: var(--rm); --c-orange: #FFA766; --c-green: #34D399; --c-purple: #DB9BDD; --c-blue: #93B3FF; --c-red: #F87171; --card: var(--surface); --card-hover: var(--surface-2); --header-grad: linear-gradient(135deg, #0A1220 0%, #11182B 50%, #1A263F 100%); --header-sheen: radial-gradient(1200px 400px at 20% -40%, rgba(77, 123, 255, 0.16), transparent 60%); --hero-on-navy: #FFFFFF; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6); --shadow-2: var(--shadow-md); --shadow-gold: 0 10px 30px rgba(77, 123, 255, 0.22); --shadow-a: 0 0 0 1px rgba(77, 123, 255, 0.28), 0 12px 40px rgba(77, 123, 255, 0.35); --grid-line: rgba(255, 255, 255, 0.06); --ng-bg: linear-gradient(135deg, #11182B 0%, #172138 100%); --ng-border: #233150; --ng-text: var(--a-3); --ng-text-soft: var(--text-2); --ng-track: rgba(77, 123, 255, 0.12); --bg-pattern: radial-gradient(1200px 600px at 80% -200px, rgba(77, 123, 255, 0.18), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(129, 140, 248, 0.08), transparent 55%); } /* ───────────────────────────────────────────────────────── BASE TYPOGRAPHY & BODY ───────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background-color: var(--bg); color: var(--text); transition: background-color 0.2s ease, color 0.2s ease; font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: -0.003em; } .display { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } .tabular, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; } .eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--text-3); } /* ───────────────────────────────────────────────────────── THEME TOGGLE (legacy