/* DataSphere design tokens — ported from KnowledgeWebPro's "Command Deck" (private/admin portal) + "Drought Atlas" (public portal) design system. Companion C# mirrors: DataSphere.Web/Theme/PrivateTheme.cs (private/admin MudTheme) and DataSphere.Web/Theme/PublicTheme.cs (public-portal MudTheme) — MudBlazor components read the C# palette, not these CSS custom properties, so keep all three in sync by hand whenever a token value changes here. Layer 1 (:root) is global — the private/admin "Command Deck" identity plus shared chrome (buttons, badges, dialogs) used everywhere. Layer 2 (.ds-pub-shell) is scoped to the public portal only and layers its own warm/editorial palette on top of Layer 1. Dark mode is a hand-rolled `.ds-dark` class (not an attribute selector) applied to AND mirrored onto via JS interop (window.setDsTheme in wwwroot/js/app.js) — MudBlazor's portalled dialog/popover/snackbar content isn't a descendant of whichever layout element toggles the class, so both need it. */ :root { /* Color — navy surface ramp (private "Command Deck" identity) */ --ds-navy-950: #0a1628; --ds-navy-900: #0d1f3c; --ds-navy-800: #132d50; --ds-navy-700: #1a3a64; --ds-navy-600: #1e4d8c; /* Color — amber accent ramp (formerly "gold" — all --ds-gold-* call sites were renamed directly to --ds-amber-*, so no alias layer remains) */ --ds-amber-500: #e8920c; --ds-amber-400: #f5a623; --ds-amber-300: #fbbf4e; --ds-amber-200: #fcd88a; --ds-amber-100: #fef0cd; /* Color — secondary hues (stat cards / status badges) */ --ds-teal-500: #0d9488; --ds-teal-400: #14b8a6; --ds-emerald-500: #059669; --ds-rose-500: #e11d48; --ds-violet-500: #7c3aed; /* Color — surfaces */ --ds-surface: #ffffff; --ds-surface-raised: #ffffff; --ds-surface-muted: #f7f9fc; --ds-surface-hover: #eef2f9; --ds-surface-alt: #f7f9fc; /* Color — borders */ --ds-border: #e2e8f0; --ds-border-subtle: #f1f5f9; --ds-line: #e2e8f0; --ds-line-strong: #cbd5e1; --ds-line-on-navy: rgba(245, 166, 35, 0.28); /* Color — text (theme-reactive; overridden in .ds-dark below) */ --ds-text: #1e293b; --ds-text-muted: #64748b; --ds-text-subtle: #94a3b8; /* KWP-vocabulary aliases for new shared components (also theme-reactive, via var()) */ --ds-text-primary: var(--ds-text); --ds-text-secondary: var(--ds-text-muted); /* Legacy ink/paper aliases — many existing pages reference these directly, always for text/backgrounds sitting on the fixed navy header band, so these stay pinned to their light values in BOTH themes (never redefined in .ds-dark) rather than tracking --ds-text/--ds-surface, which do change between themes. */ --ds-ink-900: #1e293b; --ds-ink-700: #64748b; --ds-ink-500: #94a3b8; --ds-paper-50: #ffffff; --ds-paper-100: #f7f9fc; --ds-paper-200: #eef2f9; /* Color — semantic (unchanged) */ --ds-color-success: #10b981; --ds-color-warning: #f59e0b; --ds-color-error: #ef4444; --ds-color-info: #0ea5e9; /* Typography — family stacks */ --ds-font-display: 'Outfit', 'Arial Narrow', sans-serif; --ds-font-body: 'DM Sans', -apple-system, 'Segoe UI', sans-serif; --ds-font-mono: 'Outfit', 'DM Sans', monospace; /* Typography — modular scale (unchanged) */ --ds-text-xs: 0.75rem; --ds-text-sm: 0.875rem; --ds-text-base: 1rem; --ds-text-lg: 1.125rem; --ds-text-xl: 1.25rem; --ds-text-2xl: 1.5rem; --ds-text-3xl: 1.875rem; --ds-text-4xl: 2.25rem; --ds-text-5xl: 3rem; --ds-text-6xl: 3.75rem; --ds-leading-tight: 1.1; --ds-leading-normal: 1.5; --ds-leading-relaxed: 1.7; --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.08em; /* Spacing — 8px base scale (unchanged) */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.5rem; --ds-space-6: 2rem; --ds-space-8: 3rem; --ds-space-10: 4rem; --ds-space-12: 6rem; --ds-space-16: 8rem; /* Radii — soft/rounded "Command Deck" identity (was deliberately sharp 2/4/8px) */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; /* Shadows — soft blurred elevation (was flat "stamped" offset shadows) */ --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --ds-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); --ds-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.03), 0 6px 24px rgba(15, 23, 42, 0.06); --ds-shadow-card-hover: 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(15, 23, 42, 0.10); --ds-shadow-gold: 0 4px 14px rgba(232, 146, 12, 0.28); /* Motion */ --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ds-duration-fast: 150ms; --ds-duration-base: 250ms; --ds-duration-slow: 400ms; /* Layout — horizontal "Command Deck" nav shell */ --ds-topbar-h: 52px; --ds-navrail-h: 44px; --ds-header-total: calc(var(--ds-topbar-h) + var(--ds-navrail-h)); } /* Dark mode: hand-rolled class (not MudBlazor's own dark mode, and not an attribute selector) so it can be toggled on and mirrored onto for portalled MudBlazor content — see window.setDsTheme in wwwroot/js/app.js. */ .ds-dark { --ds-surface: #141824; --ds-surface-raised: #1c2233; --ds-surface-muted: #111520; --ds-surface-hover: #232940; --ds-surface-alt: #1c2233; --ds-border: #2a3149; --ds-border-subtle: #1e2438; --ds-line: #2a3149; --ds-line-strong: #3a4360; --ds-line-on-navy: rgba(245, 166, 35, 0.24); --ds-text: #e8ecf4; --ds-text-muted: #8b95ad; --ds-text-subtle: #5a6478; /* --ds-ink-*/--ds-paper-* deliberately NOT overridden here — they're the fixed "light text on the always-navy header band" tokens, not theme-reactive surfaces. --ds-text-primary/--ds-text-secondary above already track this block via var(). */ --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3); --ds-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.15); --ds-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.25), 0 16px 48px rgba(0, 0, 0, 0.2); } /* ---- Layer 2: public portal ("Drought Atlas" editorial identity) ---- Scoped to .ds-pub-shell (PublicLayout.razor's root element only) — never referenced outside the public portal's content tree. */ .ds-pub-shell { --pp-paper: #faf7f0; --pp-paper-2: #f3eee2; --pp-card: #ffffff; --pp-ink: #182430; --pp-ink-2: #4c5b6b; --pp-ink-3: #8593a2; --pp-line: #e2daca; --pp-line-2: #c9bea6; --pp-night: #0a1628; --pp-night-2: #0d1f3c; --pp-night-line: rgba(255, 255, 255, 0.10); --pp-night-ink: #f3efe6; --pp-night-ink-2: rgba(243, 239, 230, 0.62); --pp-amber: #e8920c; --pp-amber-2: #f5a623; --pp-amber-soft: #faeeda; --pp-green: #177a54; --pp-red: #c22843; --pp-blue: #2563a8; --pp-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --pp-sans: 'DM Sans', sans-serif; } .ds-pub-shell--dark, .ds-dark .ds-pub-shell { --pp-paper: #0d141f; --pp-paper-2: #0a101a; --pp-card: #151f2d; --pp-ink: #eaeef4; --pp-ink-2: #a2aebd; --pp-ink-3: #6b7c90; --pp-line: #24344a; --pp-line-2: #35496a; --pp-night: #070e19; --pp-night-2: #0b1626; --pp-amber: #f5a623; --pp-amber-2: #fbbf4e; --pp-amber-soft: rgba(245, 166, 35, 0.13); --pp-green: #2fb183; --pp-red: #f16481; --pp-blue: #5d9be0; } /* Grid-line texture utility — a faint graph-paper grid (KWP uses this only on dark hero surfaces, much subtler than a dot pattern). Class names kept as "dot-grid" for backward compatibility with existing page headers that reference them. */ .ds-dot-grid { background-image: linear-gradient(var(--ds-line) 1px, transparent 1px), linear-gradient(90deg, var(--ds-line) 1px, transparent 1px); background-size: 30px 30px; } .ds-dot-grid-on-navy { background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 30px 30px; } /* Reusable "eyebrow" label style: uppercase, tracked-out small-caps-ish tag */ .ds-eyebrow { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; font-weight: 600; } /* Reusable numeral callout — tabular-nums stat treatment used throughout the app. Global (not page-scoped) because Blazor does not isolate plain