/* Global design tokens — P3.1-001. * * Forensic dark theme. CSS custom properties only; no cross-file * includes, no remote font rules, no url() — the offline workstation * (INV-4) never fetches a resource. The font stack is SYSTEM fonts * already installed locally. * Stage fill/stroke colours are NOT defined here: STAGE_STYLE_WEB * (_cytoscape.py) is the single source of truth for those and is joined * server-side (inline style) by the chart/gantt builders. */ :root { /* Surfaces */ --bg: #0f1419; --surface: #1a212b; --surface-raised: #222b37; --border: #2f3a48; /* Text */ --text: #e6edf3; --muted: #9aa7b4; --heading: #f4f8fb; /* Accent / status */ --accent: #4ea1ff; --accent-strong: #2f7fe0; --danger: #ff6b6b; --danger-strong: #e04848; /* Typography — system stacks only (no web fonts). */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-size: 15px; --line-height: 1.5; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Radius */ --radius-sm: 4px; --radius-md: 8px; /* Layout */ --content-max: 1100px; /* MiroFish console components — P3.3-008. Structural tokens shared by both themes; status colours differ per theme (the light values live in the [data-theme="light"] block below; the bare :root carries the DARK-forensic variants). None use url() (INV-4). --radius-card == --radius-md (8px); --font-display aliases the system sans (decision: system fonts only — no Space Grotesk webfont — so the MiroFish geometric feel is approximated locally). */ --radius-card: 8px; --font-display: var(--font-sans); --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); --status-traced: #4ec77f; --status-traced-bg: #14301f; --status-frontier: #e0a24a; --status-frontier-bg: #2e2415; --status-idle: #9aa7b4; --status-idle-bg: #1f2730; /* Buttons — P3.3-009 #1. A dedicated button palette per theme so the surface no longer reuses --accent-strong + --heading (which paired a dark heading colour onto a blue fill on the LIGHT theme = poor contrast). DARK default below; the light overrides live in the [data-theme="light"] block. --btn-focus drives the keyboard focus ring. The blue fill carries near-white text on both themes (WCAG AA). */ --btn-bg: #2f7fe0; --btn-text: #f4f8fb; --btn-border: #2f7fe0; --btn-hover-bg: #4ea1ff; --btn-hover-border: #4ea1ff; --btn-focus: #8cc2ff; /* Neutral/secondary button (e.g. graph in-canvas tools): subtle surface that reads on either theme. */ --btn-muted-bg: #222b37; --btn-muted-text: #e6edf3; --btn-muted-border: #2f3a48; --btn-muted-hover-bg: #2f3a48; } /* Light theme override — P3.3-001.5a. * * Selected by (the global theme setting); the * bare :root above stays the DARK default when no attr is present. This * block overrides ONLY the colour custom properties — typography, * spacing, radius, and --content-max are inherited unchanged (P3.1-008 * scope discipline: a theme switch never reflows layout). Stage * fill/stroke colours are still NOT defined here (STAGE_STYLE_WEB stays * the server-injected SSOT), so the graph palette is theme-agnostic. */ :root[data-theme="light"] { /* Surfaces — white cards on a soft grey canvas (MiroFish console). */ --bg: #f7f8fa; --surface: #ffffff; --surface-raised: #f3f5f7; --border: #e6e8ec; /* Text */ --text: #1f2933; --muted: #6b7785; --heading: #0f1419; /* Accent / status */ --accent: #2f7fe0; --accent-strong: #1c5fb3; --danger: #d33a3a; --danger-strong: #b02525; /* Console components — soft shadow + light status tints (MiroFish). */ --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06); --status-traced: #1f9d57; --status-traced-bg: #e6f5ec; --status-frontier: #c9731a; --status-frontier-bg: #fbeede; --status-idle: #6b7785; --status-idle-bg: #eef0f3; /* Buttons — light "console" surface (P3.3-009 #1). Solid blue primary with white text. AA contrast 4.9:1 on #1c6fd2 (codex P2 fix — the prior #2f7fe0 was ~4.0:1, below WCAG AA 4.5:1 for 0.95rem text). The hover (#1c5fb3, 6.3:1) is a touch darker; the neutral/secondary button becomes a white-on-light chip with a hairline border + grey hover. */ --btn-bg: #1c6fd2; --btn-text: #ffffff; --btn-border: #1c6fd2; --btn-hover-bg: #1c5fb3; --btn-hover-border: #1c5fb3; --btn-focus: #1c5fb3; --btn-muted-bg: #ffffff; --btn-muted-text: #1f2933; --btn-muted-border: #d5d8dc; --btn-muted-hover-bg: #eef0f3; }