/* ============================================================================ DESIGN TOKENS - LocalGovIndex Overhauled 2026-05-23. Deeper navy primary + warm terracotta accent + refined neutral ramp. Adds editorial display type scale (paired with Fraunces variable serif loaded in App.razor). Dark mode preserved. Palette philosophy: - PRIMARY (navy) carries every clickable element: links, buttons, brand, active nav. Stays disciplined, never appears decoratively. - ACCENT (terracotta) is rare and earned. Reserved for "hot" signals - live pulses, top-ranked items, primary CTAs that need to OUT-WEIGHT a normal primary link. Use 1-2 per page max. Never use as a link color. - NEUTRALS form the chrome - the deep ink, the dim labels, the hairline borders, the off-white surfaces. Most of the page is neutrals. - SEMANTIC chips (success/danger/warning) only appear when their meaning is literal. Not for decoration. Not for "this section is happy." ============================================================================ */ :root { color-scheme: light; /* ── Primary - deep navy with confident weight ───────────────────── */ --color-primary: #1d3a5f; /* navy-700 */ --color-primary-dark: #142a48; /* navy-900 - hover/pressed */ --color-primary-light: #eef2f8; /* navy-50 - tinted bg */ /* ── Accent - warm terracotta. Rare and earned. ─────────────────── */ --color-accent: #b4541a; /* terracotta-700 */ --color-accent-dark: #8c3f12; /* hover */ --color-accent-light: #fdf2eb; /* cream tint */ /* ── Secondary - slate ink, non-clickable chrome ────────────────── */ --color-secondary: #4a5868; /* ── Semantic chips ─────────────────────────────────────────────── */ --color-success: #047857; /* emerald-700 */ --color-success-light: #ecfdf5; --color-danger: #b91c1c; /* red-700 */ --color-danger-light: #fef2f2; --color-warning: #a16207; /* amber-700 */ --color-warning-light: #fffbeb; /* ── Text - dense ink hierarchy ─────────────────────────────────── */ --color-text: #0f172a; /* slate-900 */ --color-text-secondary: #475569; /* slate-600 */ --color-text-muted: #64748b; /* slate-500 */ --color-text-dim: #94a3b8; /* slate-400 - least important */ /* ── Backgrounds ───────────────────────────────────────────────── The page bg is a very subtle warm-cool gray (NOT pure white) so pure-white cards pop with a hairline of contrast. Premium-feel trick that costs nothing but distinguishes the site from default Bootstrap-on-white. */ --color-bg: #fafbfc; /* slightly off-white page bg */ --color-bg-secondary: #e8edf3; /* slate-100ish - inputs */ --color-bg-tertiary: #d8dfe8; /* slate-200 */ /* Card surfaces now carry a SUBTLE gray tint (was pure #ffffff) so panels read as distinct surfaces against the page rather than blending into it. Adjusted 2026-05-23. */ --color-bg-card: #f3f5f9; --color-bg-warm: #f3eee5; /* paper-warm, for editorial blocks */ /* ── Borders ────────────────────────────────────────────────────── */ --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-border-strong: #cbd5e1; /* for active/focus chrome */ /* ── Spacing scale (unchanged - already disciplined) ────────────── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; /* ── Typography ─────────────────────────────────────────────────── */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Display face: Fraunces variable serif with optical sizing. Loaded via Google Fonts link in App.razor. Falls back to a serif stack so a slow font load doesn't FOUT into the sans body face. */ --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Charter, 'Source Serif Pro', Georgia, serif; --font-heading: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ── Type scale - body ──────────────────────────────────────────── */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* ── Type scale - editorial display (Fraunces) ─────────────────── Tightened 2026-05-23 PM. Earlier display-1 at clamp(2.5..4rem) was reading as "magazine cover" weight on hero pages - too loud for a data product. Pulled back to a confident-but-calmer scale that still uses Fraunces's serif voice without overwhelming the rail and search box beside it. */ --text-display-1: clamp(1.5rem, 2.2vw, 1.875rem); /* hero - data-product scale, not magazine cover */ --text-display-2: clamp(1.25rem, 1.8vw, 1.5rem); /* section */ --text-display-3: clamp(1.125rem, 1.4vw, 1.25rem); /* sub-section */ /* ── Line height ─────────────────────────────────────────────────── */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7; /* ── Legacy route-typography aliases (kept for back-compat) ─────── Existing pages bind to these explicit vars (RegionDetail, Newsroom, Brief, Item, etc.). They now reference the unified scale above so a single bump propagates. */ --route-title-size: var(--text-display-1); --route-title-line: var(--leading-tight); --route-title-weight: 600; --route-lede-size: clamp(1rem, 1.45vw, 1.15rem); --route-lede-line: var(--leading-relaxed); --route-section-title-size: var(--text-display-3); --route-card-title-size: 1.05rem; --route-metric-size: clamp(1.25rem, 2.4vw, 1.75rem); /* ── Borders & Radius - softer, more 2026 ───────────────────────── */ --radius-xs: 0.25rem; /* 4px */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 999px; /* ── Shadows - layered for real elevation, not flat lift ───────── The slate-tinted alphas (rgba(15, 23, 42, x)) read as quiet ink shadows rather than flat black. Tints with the page background. */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06); /* ── Focus ring ─────────────────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(29, 58, 95, 0.25); /* primary @ 25% */ /* Keep in sync with --color-primary above. rgba lit because CSS doesn't allow rgba(var(--color-primary), 0.25) yet without color-mix; we use a lit value to avoid the color-mix browser-support cost on the focus path. Update both if you change --color-primary. */ /* ── Layout ─────────────────────────────────────────────────────── */ --container-max: 72rem; --container-padding: var(--space-md); /* ── Gradients - used across AskBox, hot-topics rail, scope chips, featured panels, scorecard tiles, etc. The "soft panel" gradient is a paper-warm 180deg wash; flipping it to dark via the dark block below catches every consumer at once instead of editing each call site. */ /* Panel gradients shifted slightly darker 2026-05-23 so they read as distinct surfaces against the off-white page bg instead of blending into it. Same warm-to-cool direction, deeper stops. */ --gradient-panel-soft: linear-gradient(180deg, #eef1f6 0%, #e2e8f0 100%); --gradient-panel-cool: linear-gradient(180deg, #ebe9fa 0%, #e0e6f9 100%); /* ── Transitions - shared easing, no surprises ──────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-medium: 200ms; --duration-slow: 320ms; } @media (min-width: 640px) { :root { --container-padding: var(--space-lg); } } /* ============================================================================ DARK MODE - sophisticated deep blue-black with cooled-down primary ============================================================================ Surface palette: deep ink-blue page (#0b1220), slate-tinted cards (#16203a), slate borders. Primary lifts to a brighter cyan-navy that reads on the dark surface; accent terracotta lightens to feel warm rather than scorched. Semantic colors light up by an alpha shift - pass/fail/warn stay legible without changing identity. Shadows get heavier alpha so they're visible on dark surfaces. Triggers: - OS preference (prefers-color-scheme: dark) UNLESS the user has explicitly opted into light via the footer toggle (data-theme="light"). - Explicit user override via data-theme="dark". Hardcoded literals scattered through v2.css and site.css don't pick up these tokens directly. The dark-overrides block at the end of v2.css handles the most-visible class-specific surfaces; site.css overrides live next to .theme-toggle near the footer. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-primary: #6ba3d6; /* navy-300 - lifts to read on dark */ --color-primary-dark: #8ebadf; /* hover - lighter still */ --color-primary-light: #1a2a44; /* deep tinted bg */ --color-accent: #e8946a; /* warm clay-300 */ --color-accent-dark: #f0ab8a; --color-accent-light: #3a1f12; /* deep clay tint */ --color-secondary: #94a3b8; --color-success: #34d399; --color-success-light: #0e3a2a; --color-danger: #fca5a5; --color-danger-light: #3a1414; --color-warning: #fcd34d; --color-warning-light: #3a2c08; --color-text: #e5e7eb; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-dim: #64748b; --color-bg: #0b1220; /* deep ink-blue page bg */ --color-bg-secondary: #18233d; --color-bg-tertiary: #24314f; /* Card surface lifted 2026-05-23 from #16203a so panels read with more presence against the deep page bg. */ --color-bg-card: #1d2a4a; --color-bg-warm: #1b1e2a; /* cool dark editorial */ --color-border: #2a3654; --color-border-light: #1f2a40; --color-border-strong: #3a4868; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(107, 163, 214, 0.3); --gradient-panel-soft: linear-gradient(180deg, #243355 0%, #1c2748 100%); --gradient-panel-cool: linear-gradient(180deg, #28284a 0%, #1f203e 100%); } } :root[data-theme="dark"] { color-scheme: dark; --gradient-panel-soft: linear-gradient(180deg, #243355 0%, #1c2748 100%); --gradient-panel-cool: linear-gradient(180deg, #28284a 0%, #1f203e 100%); --color-primary: #6ba3d6; --color-primary-dark: #8ebadf; --color-primary-light: #1a2a44; --color-accent: #e8946a; --color-accent-dark: #f0ab8a; --color-accent-light: #3a1f12; --color-secondary: #94a3b8; --color-success: #34d399; --color-success-light: #0e3a2a; --color-danger: #fca5a5; --color-danger-light: #3a1414; --color-warning: #fcd34d; --color-warning-light: #3a2c08; --color-text: #e5e7eb; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-dim: #64748b; --color-bg: #0b1220; --color-bg-secondary: #18233d; --color-bg-tertiary: #24314f; --color-bg-card: #1d2a4a; --color-bg-warm: #1b1e2a; --color-border: #2a3654; --color-border-light: #1f2a40; --color-border-strong: #3a4868; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(107, 163, 214, 0.3); }