/* ============================================================================ * elections-core / theme / tokens.css * ---------------------------------------------------------------------------- * The single source of truth for the shared visual language across every * country dashboard (France, UK, Italy, and future ports). * * SEMANTIC design tokens only — no component rules, no country colours. * Party / bloc colours are injected at runtime from each country's config * (config/*.config.js → lib/colors.js sets `--bloc-XXX` on :root). * * LIGHT is the default theme (party palettes are designed for light * backgrounds; the darkest parties are legible on light). Dark is available * via (lib/bootstrap.js sets it from config.theme). * * Two "text" tokens that are easy to confuse: * --text-on-accent : white — for text ON the coloured header / accent fills. * --text-strong : the strongest heading colour ON a card surface. * Use --text-strong for panel/card headings, --text-on-accent only on colour. * ========================================================================== */ :root { /* ---- Surfaces (low → high elevation) --------------------------------- */ --surface-bg: #f4f5f7; /* page background */ --surface-1: #ffffff; /* panels / cards */ --surface-2: #f8fafc; /* inset / raised areas */ --surface-3: #eef1f5; /* deep wells (chart canvas) */ /* ---- Borders --------------------------------------------------------- */ --border: #dfe3e8; --border-weak: #eceff3; /* ---- Text ------------------------------------------------------------ */ --text: #1f2937; --text-muted: #5b6672; --text-dim: #8a94a1; --text-strong: #0f172a; /* headings on card surfaces */ --text-on-accent: #ffffff; /* text on coloured/accent backgrounds */ /* ---- Accent ---------------------------------------------------------- */ --accent: #2563eb; --accent-strong: #1d4ed8; --accent-weak: rgba(37, 99, 235, 0.10); --accent-border: rgba(37, 99, 235, 0.38); --focus: #2563eb; /* ---- Status ---------------------------------------------------------- */ --pos: #15803d; --neg: #dc2626; --warn: #b45309; --warn-weak: rgba(180, 83, 9, 0.10); --warn-border: rgba(180, 83, 9, 0.30); /* ---- Secondary accents (nav pills / chips) — darkened for light bg --- */ --accent-blue: #2563eb; --accent-green: #059669; --accent-cyan: #0e7490; --accent-violet: #7c3aed; /* ---- Coloured header endpoints (white text sits on this) ------------- */ --header-from: #1e3a8a; --header-to: #2563eb; /* ---- Mark outline — hairline around party-coloured swatches/marks ---- * On light surfaces a translucent dark outline delineates pale parties * (yellows, light greys) that would otherwise wash out. */ --mark-outline: rgba(15, 23, 42, 0.28); --mark-outline-strong: rgba(15, 23, 42, 0.45); /* ---- Shape / depth / motion ----------------------------------------- */ --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-pop: 0 6px 22px rgba(16, 24, 40, 0.14); --ease: 0.15s ease; /* ---- Typography ------------------------------------------------------ */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; --root-font-size: 15px; /* ---- Layout ---------------------------------------------------------- */ --content-max: 1400px; --content-max-narrow: 1200px; } /* ---- Dark theme (opt-in: ) -------------------- */ :root[data-theme="dark"] { --surface-bg: #0f172a; --surface-1: #1e293b; --surface-2: #263347; --surface-3: #0c1629; --border: #334155; --border-weak: rgba(51, 65, 85, 0.5); --text: #f1f5f9; --text-muted: #94a3b8; --text-dim: #64748b; --text-strong: #ffffff; --text-on-accent: #ffffff; --accent: #60a5fa; --accent-strong: #3b82f6; --accent-weak: rgba(96, 165, 250, 0.12); --accent-border: rgba(96, 165, 250, 0.40); --focus: #60a5fa; --pos: #4ade80; --neg: #f87171; --warn: #FAA61A; --warn-weak: rgba(250, 166, 26, 0.14); --warn-border: rgba(250, 166, 26, 0.35); --accent-blue: #60a5fa; --accent-green: #34d399; --accent-cyan: #12B6CF; --accent-violet: #a78bfa; --header-from: #1a2744; --header-to: #0f172a; --mark-outline: rgba(255, 255, 255, 0.35); --mark-outline-strong: rgba(255, 255, 255, 0.55); --shadow: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-pop: 0 6px 22px rgba(0, 0, 0, 0.45); } /* ============================================================================ * LEGACY ALIASES — old repo-specific names → semantic tokens. * ========================================================================== */ :root { --bg: var(--surface-bg); --bg-card: var(--surface-1); --bg-card2: var(--surface-2); --card2: var(--surface-2); --panel: var(--surface-1); --muted: var(--text-muted); }