/* ============================================================ THEME TOKENS - the single source of truth for all colors. app.css references these only via var(--token); it has no hardcoded colors. Swap the whole look by editing values here, or add a [data-theme="..."] block and set . ============================================================ */ /* Bright dashboard theme: white cards on a light blue-gray page, vivid blue / teal-green / purple accents. */ :root { /* surfaces */ --bg: #eef2f8; --panel: #ffffff; --panel2: #f3f6fb; --border: #e3e8f1; /* text */ --text: #21304a; --muted: #7e8aa0; /* brand / status */ --accent: #2f88ff; --green: #21c98a; --red: #ef5573; --orange: #f6a23c; /* foreground on colored surfaces + shadows */ --on-accent: #ffffff; --on-green: #06321f; --shadow: #ccd4e4; /* transparency checkerboard (damier) */ --checker-a: #e7ecf5; --checker-b: #f5f7fb; /* type tags */ --tag-png-bg: #efe6ff; --tag-png-fg: #7c4dff; --tag-spine-bg: #e2eeff; --tag-spine-fg: #2f6bff; /* idle placement floor line */ --floor: #18b6d6; /* pixel completeness bar */ --bar-bg: #eaeef6; --bar-frame: #d4dbe9; --bar-empty: #dbe1ee; } /* Original dark theme - set to use it. [data-theme="dark"] { --bg: #14141f; --panel: #1e1e2e; --panel2: #262638; --border: #34344a; --text: #e6e6f0; --muted: #9090a8; --accent: #6c8cff; --green: #4ec97a; --red: #e0556a; --orange: #f0a04b; --on-accent: #ffffff; --on-green: #06210f; --shadow: #000000; --checker-a: #2a2a3a; --checker-b: #222230; --tag-png-bg: #3a2a4a; --tag-png-fg: #d09bff; --tag-spine-bg: #2a3a5a; --tag-spine-fg: #9bb8ff; --floor: #59d3e0; --bar-bg: #0d0d16; --bar-frame: #3a3a52; --bar-empty: #23233a; } */