/* Design tokens shared by app.css and landing.css. Import this file FIRST in any stylesheet that uses these variables. Theme system: :root — dark theme (default brand experience) [data-theme="light"] — light theme overrides data-theme is applied to by the pre-paint script in base.html / base_public.html before first render. Anonymous: follows prefers-color-scheme. Logged-in: synced via users.theme_preference. Three states: dark / light / absent (= follow system). Components must reference colors via var(--*) — never hardcode hex/rgba for theme-sensitive surfaces. */ :root { /* Tells the browser to render native widgets (scrollbars, form elements, date pickers) in the matching mode. The light-theme override flips it. */ color-scheme: dark; --void: #07080d; --abyss: #0c0e1a; --depth: #111525; --surface: #161b2e; --raised: #1d2340; --bg: #07080d; --border: rgba(180, 150, 80, 0.14); --border2: rgba(180, 150, 80, 0.26); --gold: #c9a84c; --gold-light: #e4c678; --gold-dim: rgba(201, 168, 76, 0.28); --gold-bg: rgba(201, 168, 76, 0.07); --cyan: #4ecdc4; --cyan-dim: rgba(78, 205, 196, 0.15); --cyan-bg: rgba(78, 205, 196, 0.07); --red: #e05a5a; --red-dim: rgba(224, 90, 90, 0.15); --green: #6bcb8b; --green-dim: rgba(107, 203, 139, 0.15); --purple: #9b7fe8; --text: #ddd4be; --muted: rgba(140, 128, 112, 0.95); --muted2: rgba(74, 66, 56, 0.95); --glow-gold: 0 0 20px rgba(201,168,76,0.2); --glow-cyan: 0 0 20px rgba(78,205,196,0.18); /* Theme-flipping utility tokens. Components that previously used hardcoded rgba(255,255,255,0.03) / rgba(0,0,0,0.4) should reference these instead so light mode renders coherently. */ --overlay-soft: rgba(255, 255, 255, 0.03); /* faint divider / hover bg */ --overlay-strong: rgba(255, 255, 255, 0.08); /* card hover, focus ring bg */ --shadow-color: rgba(0, 0, 0, 0.40); --shadow: 0 4px 20px var(--shadow-color); /* Translucent surface tokens for nav bars + FAQ cards + drop-in panels. These let landing-page elements that previously hardcoded rgba(7,8,13,…) flip to a matching light-tint surface in light mode. */ --surface-translucent: rgba(7, 8, 13, 0.50); --surface-translucent-strong: rgba(7, 8, 13, 0.85); --surface-translucent-deep: rgba(15, 12, 6, 0.65); /* Font roles. The dashboard may migrate body { font-family } from Crimson Pro to var(--font-body) in a follow-up phase to adopt these. */ --font-display: 'Cinzel', serif; /* wordmark, hero title, eyebrows */ --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* UI / dense product copy */ --font-prose: 'Crimson Pro', Georgia, serif; /* long-form marketing prose */ --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; /* labels, code, badges */ /* Fluid layout tokens — landing page scales from 360px to 4K without locking content to a fixed-pixel container. Used as padding-inline on every landing section so gutters grow with viewport. */ --gutter-fluid: clamp(1.25rem, 5vw, 6rem); --section-pad-y: clamp(2.75rem, 6vw, 7rem); --hero-pad-y-top: clamp(5rem, 9vw, 11rem); --hero-pad-y-bottom: clamp(2.5rem, 5vw, 6rem); --measure: 70ch; } /* Light theme — warm parchment-adjacent off-white with darker gold accent. Brand identity preserved (gold primary), AA contrast on body text. Only theme-sensitive tokens are overridden. Spacing, font, radius, etc. stay shared with :root. */ [data-theme="light"] { color-scheme: light; /* Light-mode hierarchy mirrors dark: void = body (most tinted), each step rises toward pure white so "raised" surfaces clearly pop. */ --void: #efe7d2; --abyss: #f5efdc; --depth: #faf4e6; --surface: #fffdf6; --raised: #ffffff; --bg: #efe7d2; --border: rgba(140, 110, 60, 0.22); --border2: rgba(140, 110, 60, 0.38); --stroke: rgba(140, 110, 60, 0.22); --stroke2: rgba(140, 110, 60, 0.38); --shadow: 0 18px 50px rgba(60, 40, 10, 0.14), 0 2px 6px rgba(60, 40, 10, 0.06); --shadow2: 0 8px 24px rgba(60, 40, 10, 0.10), 0 1px 3px rgba(60, 40, 10, 0.05); --gold: #b08a2a; /* darker for AA contrast on light bg */ --gold-light: #c9a84c; /* dark-mode primary becomes the lighter accent */ --gold-dim: rgba(176, 138, 42, 0.18); --gold-bg: rgba(176, 138, 42, 0.06); --cyan: #2a8d86; --cyan-dim: rgba(42, 141, 134, 0.14); --cyan-bg: rgba(42, 141, 134, 0.06); --red: #b8463f; --red-dim: rgba(184, 70, 63, 0.14); --green: #3fa363; --green-dim: rgba(63, 163, 99, 0.14); --purple: #7256c8; --text: #2a261e; --muted: rgba(70, 62, 48, 0.78); --muted2: rgba(110, 100, 82, 0.85); --glow-gold: 0 0 14px rgba(176, 138, 42, 0.18); --glow-cyan: 0 0 14px rgba(42, 141, 134, 0.16); /* Light-mode overlays: dark ink on light surfaces (inverted). */ --overlay-soft: rgba(60, 40, 10, 0.04); --overlay-strong: rgba(60, 40, 10, 0.10); --shadow-color: rgba(60, 40, 10, 0.18); /* Light-mode translucent surfaces — near-white tint over the warm parchment body, so glassy nav bars read as bright frosted glass instead of yellow. */ --surface-translucent: rgba(255, 253, 246, 0.72); --surface-translucent-strong: rgba(252, 248, 237, 0.88); --surface-translucent-deep: rgba(232, 223, 196, 0.78); } /* Phase 1 fallback: charts (ECharts, canvas) embed colors at construction time and don't recolor on theme change. Until Phase 3 ships theme-aware chart palettes, light-mode users get a rough but coherent inversion so chart axes/labels remain legible against the light background. */ [data-theme="light"] .echarts-container, [data-theme="light"] canvas[data-theme-fallback] { filter: invert(0.92) hue-rotate(180deg); }