/* ===================================================== Web.Serial — Design Tokens Postman-inspired color system :root = Light theme (default CSS base) [data-theme="dark"] = Dark theme (app default via HTML attr) ===================================================== */ /* === LIGHT THEME (CSS base) === */ :root { /* Backgrounds */ --bg-base: #f5f4ed; /* Parchment */ --bg-surface: #faf9f5; /* Ivory */ --bg-panel: #f5f4ed; /* Parchment */ --bg-elevated: #ffffff; /* Pure White */ --bg-input: #ffffff; /* Pure White */ --bg-sidebar: #f5f4ed; /* Parchment */ --border-color: #e8e6dc; /* Border Warm */ --border-subtle: #f0eee6; /* Border Cream */ /* Text */ --text-main: #141413; /* Near Black */ --text-muted: #5e5d59; /* Olive Gray */ --text-placeholder: #87867f; /* Stone Gray */ /* Accent — Terracotta Brand */ --accent-primary: #c96442; --accent-primary-hover: #d97757; /* Coral Accent */ --accent-primary-dim: rgba(201, 100, 66, 0.08); /* Danger */ --accent-danger: #b53333; /* Error Crimson */ --accent-danger-hover: #9c2b2b; /* Focus */ --accent-focus: #3898ec; /* Focus Blue */ /* Shadows / Rings */ --ring-subtle: #d1cfc5; /* Secondary ring for interactive — mapping correctly */ --ring-warm: #d1cfc5; --ring-deep: #c2c0b6; /* Status */ --status-online: #1a7f37; --status-offline: #87867f; /* Stone Gray */ --status-error: #b53333; /* Error Crimson */ /* Run/Live (plotter) */ --accent-run: #1a7f37; --accent-run-hover: #156d2f; /* Terminal — stays dark in both themes */ --term-bg: #141413; /* Near Black */ --term-text: #b0aea5; /* Warm Silver */ --term-prompt: #c96442; /* Terracotta */ --term-sys: #87867f; /* Stone Gray */ --term-err: #b53333; /* Error Crimson */ /* Plotter (light) */ --plotter-bg: #faf9f5; /* Ivory */ --plotter-grid: rgba(20, 20, 19, 0.05); /* slightly warm black */ --plotter-axis: rgba(20, 20, 19, 0.15); --plotter-label: #5e5d59; /* Olive Gray */ --plotter-crosshair: rgba(20, 20, 19, 0.2); --plotter-tooltip-bg: rgba(250, 249, 245, 0.96); /* Ivory */ --plotter-tooltip-border: #e8e6dc; /* Border Warm */ --plotter-tooltip-text: #141413; /* Near Black */ --plotter-dot-stroke: #faf9f5; /* Ivory */ --plotter-toolbar-bg: #f5f4ed; /* Parchment */ --plotter-toolbar-text: #141413; /* Near Black */ --plotter-toolbar-item-text: #5e5d59; /* Olive Gray */ --plotter-toolbar-border: #e8e6dc; /* Border Warm */ --plotter-canvas-wrap-bg: #f5f4ed; /* Parchment */ } /* === DARK THEME (App default — applied via data-theme="dark" on ) === */ [data-theme="dark"] { /* Backgrounds */ --bg-base: #141413; /* Near Black */ --bg-surface: #30302e; /* Dark Surface */ --bg-panel: #141413; --bg-elevated: #30302e; --bg-input: #141413; /* Near Black */ --bg-sidebar: #141413; --border-color: #4d4c48; /* Visible against dark surfaces */ --border-subtle: #3a3935; /* Subtle separator */ /* Text */ --text-main: #b0aea5; /* Warm Silver */ --text-heading: #faf9f5; /* Ivory for headings */ --text-muted: #87867f; /* Stone Gray */ --text-placeholder: #5e5d59; /* Olive Gray */ /* Accent dim shift for dark */ --accent-primary-dim: rgba(201, 100, 66, 0.12); /* Danger */ --accent-danger: #b53333; --accent-danger-hover: #d97757; /* Coral */ /* Shadows / Rings */ --ring-warm: #4d4c48; --ring-subtle: #4d4c48; --ring-deep: #141413; /* Status */ --status-online: #3fb950; --status-offline: #5e5d59; /* Olive Gray */ --status-error: #b53333; /* Error Crimson */ /* Run/Live */ --accent-run: #3fb950; --accent-run-hover: #2ea043; /* Terminal */ --term-bg: #141413; /* Near Black */ --term-text: #b0aea5; /* Warm Silver */ --term-sys: #87867f; /* Stone Gray */ --term-err: #b53333; /* Error Crimson */ /* Plotter (dark) */ --plotter-bg: #141413; /* Near Black */ --plotter-grid: rgba(250, 249, 245, 0.05); /* Ivory faint */ --plotter-axis: rgba(250, 249, 245, 0.15); --plotter-label: #87867f; /* Stone Gray */ --plotter-crosshair: rgba(250, 249, 245, 0.25); --plotter-tooltip-bg: rgba(20, 20, 19, 0.96); --plotter-tooltip-border: #30302e; --plotter-tooltip-text: #b0aea5; --plotter-dot-stroke: #141413; --plotter-toolbar-bg: #141413; /* Dark Surface */ --plotter-toolbar-text: #b0aea5; /* Warm Silver */ --plotter-toolbar-item-text: #87867f; /* Stone Gray */ --plotter-toolbar-border: #30302e; --plotter-canvas-wrap-bg: #141413; } /* === ANSI Terminal Colors (both themes) === */ :root { --ansi-black: #000000; --ansi-red: #cd3131; --ansi-green: #0dbc79; --ansi-yellow: #e5e510; --ansi-blue: #2472c8; --ansi-magenta: #bc3fbc; --ansi-cyan: #11a8cd; --ansi-white: #e5e5e5; --ansi-bright-black: #666666; --ansi-bright-red: #f14c4c; --ansi-bright-green: #23d18b; --ansi-bright-yellow: #f5f543; --ansi-bright-blue: #3b8eea; --ansi-bright-magenta: #d670d6; --ansi-bright-cyan: #29b8db; --ansi-bright-white: #e5e5e5; }