/* * ╔══════════════════════════════════════════════════════╗ * ║ ETR - THEME / DESIGN TOKENS ║ * ║ Edit THIS file to change colors, fonts, or radius ║ * ╚══════════════════════════════════════════════════════╝ * Light is the default; dark follows the OS or an explicit * data-theme="dark" on . */ :root{ --bg:#F4F6F8; --bg2:#ECF0F3; --card:#FFFFFF; --card2:#F9FAFB; --text:#1B2430; --text-2:#39434F; --text-mut:#5B6674; --text-dim:#8C96A3; --text-inv:#FFFFFF; --bd:#DCE2E9; --bd-strong:#C2CBD5; --bd-faint:#E9EDF1; --primary:#1A5FA8; --primary-strong:#124573; --primary-soft:#E3EEF9; --primary-softer:#F0F6FC; --head:#12395E; --head2:#0D2C4A; --green:#1E7B34; --green-soft:#E1F3E5; --green-bd:#A9D8B4; --amber:#96580A; --amber-soft:#FBF0DA; --amber-bd:#E3C98E; --red:#A4262C; --red-soft:#FBE7E9; --red-bd:#E0A2A7; --purple:#5C2D91; --purple-soft:#EDE4F6; --purple-bd:#C9AEE3; --neutral:#4E5A68; --neutral-soft:#EDF0F3; --neutral-bd:#C9D2DB; --chart1:#2E7CD6; --chart2:#2F9E63; --grid:#E7EBEF; --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --sh-md:0 4px 10px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.06); --sh-lg:0 12px 32px rgba(16,24,40,.16); --r:3px; --r-md:6px; --r-lg:10px; --font:'Segoe UI','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --mono:'Cascadia Code','Consolas','JetBrains Mono',monospace; --topbar-h:56px; --side-w:224px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#11151B; --bg2:#0D1116; --card:#1A2029; --card2:#161C24; --text:#E8ECF1; --text-2:#C7CFD9; --text-mut:#99A3B0; --text-dim:#6C7684; --text-inv:#FFFFFF; --bd:#2A3340; --bd-strong:#3B4655; --bd-faint:#222A35; --primary:#4E93D6; --primary-strong:#8FBCE8; --primary-soft:#17324B; --primary-softer:#15263A; --head:#0F2438; --head2:#0B1B2B; --green:#3BAA72; --green-soft:#122B1D; --green-bd:#1F4A32; --amber:#D29A3A; --amber-soft:#2E2410; --amber-bd:#57431C; --red:#E17077; --red-soft:#331B1E; --red-bd:#5C2E33; --purple:#A98BD8; --purple-soft:#241B36; --purple-bd:#453064; --neutral:#A6B0BC; --neutral-soft:#222A34; --neutral-bd:#3A4553; --chart1:#4E93D6; --chart2:#3BAA72; --grid:#242D38; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 4px 10px rgba(0,0,0,.45); --sh-lg:0 12px 32px rgba(0,0,0,.6); } } :root[data-theme="dark"]{ --bg:#11151B; --bg2:#0D1116; --card:#1A2029; --card2:#161C24; --text:#E8ECF1; --text-2:#C7CFD9; --text-mut:#99A3B0; --text-dim:#6C7684; --text-inv:#FFFFFF; --bd:#2A3340; --bd-strong:#3B4655; --bd-faint:#222A35; --primary:#4E93D6; --primary-strong:#8FBCE8; --primary-soft:#17324B; --primary-softer:#15263A; --head:#0F2438; --head2:#0B1B2B; --green:#3BAA72; --green-soft:#122B1D; --green-bd:#1F4A32; --amber:#D29A3A; --amber-soft:#2E2410; --amber-bd:#57431C; --red:#E17077; --red-soft:#331B1E; --red-bd:#5C2E33; --purple:#A98BD8; --purple-soft:#241B36; --purple-bd:#453064; --neutral:#A6B0BC; --neutral-soft:#222A34; --neutral-bd:#3A4553; --chart1:#4E93D6; --chart2:#3BAA72; --grid:#242D38; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 4px 10px rgba(0,0,0,.45); --sh-lg:0 12px 32px rgba(0,0,0,.6); }