/* ═══════════════════════════════════════════════════════════════════════════ MAP MGT — centralised design tokens ═══════════════════════════════════════════════════════════════════════════ ONE source of truth for colour, radius and elevation across every page: index.html, login.html, landing.html, agency_pnl.html, perf_board.html, recruiting.html, task_list.html, formula_library.html, fiq.html. How it works ------------ Two token layers: 1. SEMANTIC tokens (--surface, --text-primary, --primary, --danger-soft…) The real vocabulary. New CSS should only ever use these. 2. LEGACY ALIASES (--bg, --ink, --mut2, --accent2, --panel, --blue…) Every token name the pages already use, re-pointed at a semantic token. This is what makes the migration safe: ~1,000 existing var() references keep working untouched, so no page had to be rewritten to adopt this file. Do NOT add new aliases — use the semantic names instead. Theme switching --------------- `document.documentElement[data-theme]` is set to "light" or "dark" by the boot script in each page's (reads localStorage 'mapmgt.theme'), and again from the server preference in /api/me. Bare `:root` resolves to DARK, which preserves the historical default for any context where the attribute has not been applied yet. Contrast note ------------- Dark-mode semantic foregrounds (#34D399, #FBBF24, #F87171, #60A5FA) are only legible on dark fills. The light theme deliberately uses DARKER foregrounds (#047857, #B45309, #C81E1E, #1D4ED8) so every status pill clears 4.5:1 on its soft background. Do not "simplify" these back to one shared value. ══════════════════════════════════════════════════════════════════════════ */ /* ── DARK (default) ──────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { /* Surfaces — deliberate hierarchy, not flat black */ --background: #080D14; --surface: #0E141D; --surface-secondary: #131B26; --surface-hover: #182230; --surface-raised: #1E2937; /* Borders */ --border: #202A37; --border-strong: #2A3544; /* Type */ --text-primary: #F4F7FA; --text-secondary: #8E99A8; --text-muted: #667384; /* Primary — blue. `--primary` is the FILL (white text on it); `--primary-text` is the brighter tone for accent TEXT and ICONS, which needs to stay legible against a dark background. */ --primary: #2563EB; --primary-hover: #3B82F6; --primary-text: #60A5FA; --primary-soft: rgba(37, 99, 235, 0.15); --primary-border: rgba(37, 99, 235, 0.38); --on-primary: #FFFFFF; /* Semantic */ --success: #34D399; --success-soft: rgba(52, 211, 153, 0.14); --success-border: rgba(52, 211, 153, 0.32); --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.14); --warning-border: rgba(251, 191, 36, 0.32); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.14); --danger-border: rgba(248, 113, 113, 0.32); --info: #60A5FA; --info-soft: rgba(96, 165, 250, 0.14); --info-border: rgba(96, 165, 250, 0.32); /* Neutral badge */ --neutral-soft: rgba(255, 255, 255, 0.06); --neutral-border: rgba(255, 255, 255, 0.12); /* Accent wash used by the animated backgrounds */ --accent-glow: rgba(37, 99, 235, 0.30); /* Elevation — restrained by design */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow: 0 2px 6px rgba(0, 0, 0, 0.36); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.46); /* Focus */ --focus-ring: rgba(59, 130, 246, 0.45); /* Categorical palette — for charts and data series ONLY, never for chrome. Ordered for maximum separation; distinguishable in both themes. */ --cat-1: #3B82F6; /* blue */ --cat-2: #34D399; /* green */ --cat-3: #FBBF24; /* amber */ --cat-4: #F472B6; /* pink */ --cat-5: #22D3EE; /* cyan */ --cat-6: #A78BFA; /* violet — retained as a CATEGORICAL hue, see STAGE 3 */ --cat-4-soft: rgba(244, 114, 182, 0.15); /* Brand gold — an intentional, non-primary accent on the owner tools */ --gold: #E4B04A; } /* ── LIGHT ───────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --background: #F1F3F6; --surface: #FFFFFF; --surface-secondary: #F5F6F8; --surface-hover: #EAEDF2; --surface-raised: #FFFFFF; --border: #DDE2E8; --border-strong: #CDD3DC; --text-primary: #16181D; --text-secondary: #626873; /* raised to clear 4.5:1 on the DARKEST light surface (--surface-hover) */ --text-muted: #808894; /* clears 3.0:1 on every light surface incl. --surface-hover */ --primary: #2563EB; --primary-hover: #1D4ED8; --primary-text: #2563EB; --primary-soft: #EFF6FF; --primary-border: #BFDBFE; --on-primary: #FFFFFF; /* Darker foregrounds so every pill clears 4.5:1 on its soft fill */ --success: #047857; --success-soft: #ECFDF5; --success-border: #A7F3D0; --warning: #B45309; --warning-soft: #FFFBEB; --warning-border: #FDE68A; --danger: #C81E1E; /* #DC2626 raised to clear 4.5:1 on --danger-soft */ --danger-soft: #FEF2F2; --danger-border: #FECACA; --info: #1D4ED8; --info-soft: #EFF6FF; --info-border: #BFDBFE; --neutral-soft: #EAEDF2; --neutral-border: #DDE2E8; /* No purple/blue haze behind a light operational UI */ --accent-glow: transparent; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10); --focus-ring: rgba(37, 99, 235, 0.35); --cat-1: #2563EB; --cat-2: #059669; --cat-3: #B45309; --cat-4: #DB2777; --cat-5: #0891B2; --cat-6: #7C3AED; --cat-4-soft: #FCE7F3; --gold: #B27D14; } /* ── Shape + type scale (theme-independent) ──────────────────────────────── */ :root { --radius-xs: 4px; /* badges */ --radius-sm: 6px; /* buttons, inputs */ --radius: 8px; /* cards */ --radius-lg: 10px; /* modals, panels */ --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ── Breakpoints ───────────────────────────────────────────────────────────── Media queries cannot read custom properties, so this is the documented scale rather than an enforceable one. New rules should use these five: 360px very small phones 560px phones 720px large phones / small tablets (the sidebar drawer threshold) 900px tablets 1100px narrow desktop The existing pages also carry 480, 520, 640, 760, 820, 920, 1000 and 1040, each tuned to one specific component. They are deliberately left alone -- renumbering a working breakpoint risks a layout regression for no functional gain -- but prefer the scale above when adding anything new. ────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ LEGACY ALIASES — every token name already in use across the 9 pages. These exist so the pages did not have to be rewritten. New CSS must use the semantic names above instead. ══════════════════════════════════════════════════════════════════════════ */ :root { /* index.html / login.html / landing.html */ --bg: var(--background); --bg2: var(--surface-secondary); --surface2: var(--surface-secondary); --surface3: var(--surface-hover); --border2: var(--border-strong); --text: var(--text-primary); --muted: var(--text-secondary); --muted2: var(--text-muted); --accent: var(--primary); --accent2: var(--primary-text); --accent3: var(--primary-hover); --accent-soft: var(--primary-soft); /* agency_pnl.html */ --surface-2: var(--surface-secondary); --raise: var(--surface-hover); --line: var(--border); --line-soft: var(--border); --muted-2: var(--text-muted); --accent-deep: var(--primary-hover); --pos: var(--success); --neg: var(--danger); --warn: var(--warning); --violet: var(--primary-text); --display: var(--font-display); --body: var(--font-body); --mono: var(--font-mono); --r: var(--radius); /* formula_library.html */ --panel: var(--surface); --panel2: var(--surface-secondary); --ink: var(--text-primary); --mut: var(--text-secondary); --mut2: var(--text-muted); --blue: var(--primary); --blue2: var(--primary-text); --blueDim: var(--primary-hover); --good: var(--success); --bad: var(--danger); /* perf_board.html */ --txt: var(--text-primary); --dim: var(--text-secondary); --faint: var(--text-muted); --track: var(--surface); --green: var(--success); --amber: var(--warning); --red: var(--danger); --disp: var(--font-display); /* task_list.html */ --ok: var(--success); --line2: var(--border-strong); /* recruiting.html -- --pink was in fact the same purple as --violet */ --pink: var(--primary-text); } /* ═══════════════════════════════════════════════════════════════════════════ Global primitives ══════════════════════════════════════════════════════════════════════════ */ /* One consistent keyboard focus ring everywhere. Mouse clicks are unaffected (:focus-visible), so this adds accessibility without visual noise. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Themed scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--background); } ::-webkit-scrollbar-corner { background: transparent; } ::selection { background: var(--primary); color: var(--on-primary); } /* Respect reduced-motion for the decorative background animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Shared theme toggle (sun / moon) — identical on every page ══════════════════════════════════════════════════════════════════════════ */ /* The toggle is PREFERABLY an ordinary flex item inside a page's header (see .hdr-actions and theme.js's [data-theme-slot] mount). position:fixed is only the fallback for a page with no header to host it. Fixed positioning is what caused the collision this replaced: the button sat outside normal flow at top-right and landed on top of whatever happened to be underneath -- on /login, the card's Sign in / Sign up tabs at any viewport narrower than ~516px. A margin would only have moved the collision. */ .theme-fab { position: fixed; top: 14px; right: 14px; z-index: 150; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .theme-fab:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-primary); } .theme-fab svg { width: 16px; height: 16px; } /* In-flow variant: no fixed positioning, so it cannot overlap anything. */ .theme-fab.is-inline { position: static; z-index: auto; flex: 0 0 auto; } /* Right-hand control cluster for a page header. Consistent gap, vertically centred, pushed to the end of the header's flex line. */ .hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; } .theme-fab .ico-sun { display: none; } :root[data-theme="light"] .theme-fab .ico-moon { display: none; } :root[data-theme="light"] .theme-fab .ico-sun { display: inline; }