/* theme.css — shared design tokens for the dashboard AND the 3D viewer. * Single source of truth: every page links this and reads the persisted * choice from localStorage vat_theme / vat_layout onto . * Component rules stay in each page; only token definitions live here. */ :root { --bg:#1e1e1e; --card:#252526; --card2:#2d2d2d; --border:#3c3c3c; --accent:#007acc; --accent2:#4ec9b0; --text:#d4d4d4; --fg:#d4d4d4; --muted:#858585; --red:#f87171; --yellow:#fbbf24; --green:#4ade80; --font:'Segoe UI',system-ui,sans-serif; --accent-rgb:0,122,204; --bg2:#1e1e1e; --hover-bg:rgba(255,255,255,.07); --hover-bg2:rgba(255,255,255,.12); /* Shared component tokens — inherited by every theme. * --radius: controls (buttons/inputs/chips) · --radius-panel: cards/panels/modals * --ctl-h: uniform control height * --b-*: semantic badge hues as R,G,B triplets, used as * color:rgb(var(--b-x)) on a rgba(var(--b-x),.12) background w/ .35 border. */ --radius:4px; --radius-panel:6px; --ctl-h:26px; --b-red:248,113,113; --b-orange:251,146,60; --b-yellow:251,191,36; --b-green:74,222,128; --b-blue:96,165,250; --b-cyan:34,211,238; --b-violet:167,139,250; --b-pink:249,168,212; --b-slate:148,163,184; } [data-theme="navy"] { --bg:#0f1117; --card:#1a1d27; --card2:#21253a; --border:#2d3148; --accent:#6c63ff; --accent2:#00d4ff; --text:#e2e8f0; --fg:#e2e8f0; --muted:#8892a4; --accent-rgb:108,99,255; --bg2:#0f1117; --hover-bg:rgba(108,99,255,.15); --hover-bg2:rgba(108,99,255,.25); } [data-theme="vscode"] { --bg:#1e1e1e; --card:#252526; --card2:#2d2d2d; --border:#3c3c3c; --accent:#007acc; --accent2:#4ec9b0; --text:#d4d4d4; --fg:#d4d4d4; --muted:#858585; --accent-rgb:0,122,204; --bg2:#1e1e1e; --hover-bg:rgba(255,255,255,.07); --hover-bg2:rgba(255,255,255,.12); } [data-theme="obsidian"] { --bg:#0c0c0e; --card:#141416; --card2:#1c1c21; --border:#2a2a32; --accent:#d4a017; --accent2:#fcd34d; --text:#f1f0eb; --fg:#f1f0eb; --muted:#78776f; --accent-rgb:212,160,23; --bg2:#0c0c0e; --hover-bg:rgba(212,160,23,.15); --hover-bg2:rgba(212,160,23,.25); } [data-theme="forest"] { --bg:#0b1209; --card:#121b10; --card2:#192416; --border:#253b20; --accent:#16a34a; --accent2:#4ade80; --text:#dcfce7; --fg:#dcfce7; --muted:#6b9e74; --accent-rgb:22,163,74; --bg2:#0b1209; --hover-bg:rgba(22,163,74,.15); --hover-bg2:rgba(22,163,74,.25); } [data-theme="carbon"] { --bg:#1e1e2e; --card:#252535; --card2:#2e2e47; --border:#3b3b5c; --accent:#89b4fa; --accent2:#cba6f7; --text:#cdd6f4; --fg:#cdd6f4; --muted:#6c7086; --accent-rgb:137,180,250; --bg2:#1e1e2e; --hover-bg:rgba(137,180,250,.15); --hover-bg2:rgba(137,180,250,.25); } [data-theme="crimson"] { --bg:#12080c; --card:#1c0f14; --card2:#25141c; --border:#3b1f2b; --accent:#f43f5e; --accent2:#fb7185; --text:#fce7f3; --fg:#fce7f3; --muted:#9d7e8a; --accent-rgb:244,63,94; --bg2:#12080c; --hover-bg:rgba(244,63,94,.15); --hover-bg2:rgba(244,63,94,.25); } [data-theme="onedark"] { --bg:#21252b; --card:#21252b; --card2:#2c313a; --border:#3e4451; --accent:#61afef; --accent2:#c678dd; --text:#abb2bf; --fg:#abb2bf; --muted:#5c6370; --accent-rgb:97,175,239; --bg2:#21252b; --hover-bg:rgba(255,255,255,.06); --hover-bg2:rgba(255,255,255,.1); }