/* ============================================================ SIMANUP — themes.css Brand constants + 3 selectable themes (data-theme on ). Add a new theme by copying a block and changing the tokens. ============================================================ */ :root{ /* brand constants — same across every theme */ --blue:#2E7BFF; --cyan:#1FC3F2; --red:#FF4E31; --amber:#F5A623; --slate:#63749B; --grad:linear-gradient(135deg,#2E7BFF 0%,#1FC3F2 100%); --grad-soft:linear-gradient(135deg,rgba(46,123,255,.16),rgba(31,195,242,.10)); --rb-grad:linear-gradient(135deg,#0C1730,#0A1220); /* reports hero stays deep-navy in all themes */ --radius:14px; --radius-sm:10px; --radius-lg:20px; --sb:266px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- DARK (command center · default) ---------- */ html[data-theme="dark"]{ --bg:#060A12; --bg2:#0A1120; --surface:#0F1828; --surface-2:#14203A; --card-grad:linear-gradient(180deg,#0F1828,#0C1424); --sidebar-grad:linear-gradient(180deg,#0A1120,#070C17); --red-card:linear-gradient(180deg,rgba(255,78,49,.10),#0F1828); --surface-subtle:rgba(255,255,255,.03); --input-bg:rgba(255,255,255,.03); --hover:rgba(255,255,255,.04); --track:rgba(255,255,255,.06); --chip-bg:rgba(255,255,255,.06); --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --ring-track:rgba(255,255,255,.08); --text:#E9EEF8; --muted:#8493B0; --faint:#57668A; --topbar-bg:rgba(6,10,18,.72); --cyan-soft:rgba(31,195,242,.13); --blue-soft:rgba(46,123,255,.14); --red-soft:rgba(255,78,49,.13); --amber-soft:rgba(245,166,35,.13); --slate-soft:rgba(99,116,155,.14); --red-line:rgba(255,78,49,.30); --ok-ink:#7FDBF6; --amber-ink:#F3C572; --red-ink:#FF9C86; --blue-ink:#8FB6FF; --slate-ink:#9DAAC7; --sh:0 2px 8px rgba(0,0,0,.35); --sh-lg:0 24px 60px -24px rgba(0,0,0,.7); --app-bg:radial-gradient(1100px 620px at 82% -8%,rgba(46,123,255,.14),transparent 60%), radial-gradient(900px 520px at 8% 108%,rgba(31,195,242,.08),transparent 60%),#060A12; } /* ---------- LIGHT (clean / airy) ---------- */ html[data-theme="light"]{ --bg:#F4F6FA; --bg2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F5FA; --card-grad:#FFFFFF; --sidebar-grad:linear-gradient(180deg,#FFFFFF,#F7F9FC); --red-card:linear-gradient(180deg,rgba(255,78,49,.06),#FFFFFF); --surface-subtle:#F6F9FC; --input-bg:#FFFFFF; --hover:#F3F6FB; --track:#E8EDF4; --chip-bg:#EEF2F8; --line:#E4E9F0; --line-2:#D6DEE9; --ring-track:#E8EDF4; --text:#132030; --muted:#5C6B84; --faint:#8A97AD; --topbar-bg:rgba(244,246,250,.82); --cyan-soft:rgba(31,195,242,.16); --blue-soft:rgba(46,123,255,.12); --red-soft:rgba(255,78,49,.10); --amber-soft:rgba(245,166,35,.16); --slate-soft:rgba(99,116,155,.12); --red-line:rgba(255,78,49,.28); --ok-ink:#0A7C97; --amber-ink:#946512; --red-ink:#C23A22; --blue-ink:#1E56C0; --slate-ink:#495A74; --sh:0 1px 3px rgba(16,40,70,.06),0 1px 2px rgba(16,40,70,.05); --sh-lg:0 24px 50px -20px rgba(16,40,70,.22); --app-bg:radial-gradient(1100px 620px at 82% -8%,rgba(46,123,255,.07),transparent 60%), radial-gradient(900px 520px at 8% 108%,rgba(31,195,242,.05),transparent 60%),#F4F6FA; } /* ---------- MIDNIGHT (OLED / high contrast) ---------- */ html[data-theme="midnight"]{ --bg:#000000; --bg2:#05070C; --surface:#080B12; --surface-2:#0D1220; --card-grad:linear-gradient(180deg,#080B12,#04060B); --sidebar-grad:linear-gradient(180deg,#05070C,#000000); --red-card:linear-gradient(180deg,rgba(255,78,49,.12),#080B12); --surface-subtle:rgba(255,255,255,.025); --input-bg:rgba(255,255,255,.03); --hover:rgba(255,255,255,.045); --track:rgba(255,255,255,.07); --chip-bg:rgba(255,255,255,.06); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15); --ring-track:rgba(255,255,255,.09); --text:#F1F5FC; --muted:#8A99B6; --faint:#5E6E90; --topbar-bg:rgba(0,0,0,.72); --cyan-soft:rgba(31,195,242,.16); --blue-soft:rgba(46,123,255,.17); --red-soft:rgba(255,78,49,.16); --amber-soft:rgba(245,166,35,.16); --slate-soft:rgba(99,116,155,.16); --red-line:rgba(255,78,49,.36); --ok-ink:#8CE2FA; --amber-ink:#F7CE82; --red-ink:#FFA891; --blue-ink:#9DC0FF; --slate-ink:#A7B4CE; --sh:0 2px 10px rgba(0,0,0,.6); --sh-lg:0 26px 64px -24px rgba(0,0,0,.85); --app-bg:radial-gradient(1100px 620px at 82% -8%,rgba(46,123,255,.16),transparent 58%), radial-gradient(900px 520px at 8% 108%,rgba(31,195,242,.10),transparent 58%),#000000; }