/* ───────────────────────────────────────────────────────────────────────────── TCI Dashboard — design tokens (single source of truth) Every page links this file and defines NO tokens of its own. Semantic mapping: green = positive/pass, amber = warning/in-progress, red = negative/fail. Keep that consistent across pages. ──────────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg: #0f1117; /* page background */ --surface: #1a1d27; /* cards, panels */ --surface2: #22263a; /* raised / secondary surface */ --border: #2e3250; /* Text */ --text: #e8eaf0; --muted: #8b91a8; --faint: #6b7280; /* Accents & semantics */ --accent: #3b6ef5; /* primary blue */ --orange: #f26522; /* TCI logo orange — reserved for brand touches */ --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --purple: #a855f7; --teal: #14b8a6; /* Shape */ --r: 10px; /* Nav (dark defaults; overridden in light mode) */ --nav-bg: #12141c; color-scheme: dark; } /* Light mode — same identity, inverted surfaces. Toggle sets ; nav.js persists the choice in localStorage. */ :root[data-theme="light"] { --bg: #eef1f6; --surface: #ffffff; --surface2: #e9edf5; --border: #d7dce8; --text: #1a2233; --muted: #5a6478; --faint: #8a93a6; --accent: #2f5fe0; --green: #15803d; --amber: #b45309; --red: #dc2626; --purple: #7e22ce; --teal: #0f766e; --nav-bg: #ffffff; color-scheme: light; }