/* Theme tokens — aligned with the bcstiles.com design system. Light palette is default; dark overrides apply via [data-theme="dark"] on . Consumed by layout/components CSS and read from JS (getComputedStyle) for canvas painting. */ :root { /* Brand — bcstiles blue */ --brand-start: #2196F3; --brand-end: #1565C0; --brand-soft-bg: #e8f4fd; --brand-hover-shadow: rgba(33, 150, 243, 0.28); --brand-soft-shadow: rgba(33, 150, 243, 0.15); /* Surfaces */ --bg-app: #eef1f5; --bg-canvas: #fafbfc; --bg-panel: #ffffff; --bg-section: #f4f6fa; --bg-section-hover: #eaf0f7; --bg-section-selected: #e8f4fd; --bg-input: #ffffff; --bg-btn-secondary: #eef1f5; --bg-btn-secondary-hover: #dde2ea; --bg-overlay: rgba(255, 255, 255, 0.96); --bg-modal-scrim: rgba(20, 30, 50, 0.48); /* Text */ --text-primary: #2d333b; --text-secondary: #6b7280; --text-muted: #9ca3af; --text-on-brand: #ffffff; /* Borders / dividers */ --border-panel: #dde2ea; --border-soft: #e5e9ef; --border-input: #dde2ea; /* Shadows — matches bcstiles resting + hover pattern */ --shadow-panel: 0 2px 10px rgba(20, 30, 50, 0.06); --shadow-toolbar: 0 1px 3px rgba(20, 30, 50, 0.05); --shadow-overlay: 0 4px 14px rgba(20, 30, 50, 0.10); --shadow-card: 0 2px 8px rgba(20, 30, 50, 0.07); --shadow-card-hover: 0 8px 24px rgba(33, 150, 243, 0.15); /* Accents */ --accent-danger: #ef4444; --accent-danger-hover: #dc2626; --scrollbar-track: #f4f6fa; --scrollbar-thumb: #c4cad3; --scrollbar-thumb-hover: #9ca3af; /* Radii — card/btn tokens borrowed from bcstiles */ --radius-card: 12px; --radius-btn: 8px; --radius-sm: 6px; --radius-pill: 999px; /* Canvas palette — JS reads via getComputedStyle */ --canvas-bg: #fafbfc; --canvas-grid-line: #e4e8ef; --canvas-grid-origin: #c4cad3; --canvas-wall: #2d333b; --canvas-wall-endpoint: #6b7280; --canvas-furniture-fill: rgba(107, 114, 128, 0.22); --canvas-furniture-stroke: #6b7280; --canvas-furniture-label: #2d333b; --canvas-furniture-dim: #6b7280; --canvas-dim-label: #2d333b; --canvas-dim-bg: rgba(255, 255, 255, 0.92); --canvas-selection: #2196F3; --canvas-selection-fill: rgba(33, 150, 243, 0.22); } [data-theme="dark"] { --bg-app: #0f131a; --bg-canvas: #141922; --bg-panel: #1a1f2a; --bg-section: #232935; --bg-section-hover: #2a3140; --bg-section-selected: #12365c; --bg-input: #232935; --bg-btn-secondary: #232935; --bg-btn-secondary-hover: #2f3644; --bg-overlay: rgba(26, 31, 42, 0.95); --bg-modal-scrim: rgba(0, 0, 0, 0.65); --brand-start: #3ba4f6; --brand-end: #1e88e5; --brand-soft-bg: #143a5c; --brand-hover-shadow: rgba(59, 164, 246, 0.35); --brand-soft-shadow: rgba(59, 164, 246, 0.20); --text-primary: #e8ecf2; --text-secondary: #a0a8b4; --text-muted: #6b7280; --text-on-brand: #ffffff; --border-panel: #2a3140; --border-soft: #232935; --border-input: #323a4a; --shadow-panel: 0 2px 14px rgba(0, 0, 0, 0.45); --shadow-toolbar: 0 1px 6px rgba(0, 0, 0, 0.35); --shadow-overlay: 0 4px 18px rgba(0, 0, 0, 0.55); --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 8px 24px rgba(59, 164, 246, 0.28); --accent-danger: #f87171; --accent-danger-hover: #ef4444; --scrollbar-track: #141922; --scrollbar-thumb: #3a4253; --scrollbar-thumb-hover: #4f5a6e; --canvas-bg: #141922; --canvas-grid-line: #232935; --canvas-grid-origin: #3a4253; --canvas-wall: #d8dde5; --canvas-wall-endpoint: #a0a8b4; --canvas-furniture-fill: rgba(160, 168, 180, 0.20); --canvas-furniture-stroke: #a0a8b4; --canvas-furniture-label: #e8ecf2; --canvas-furniture-dim: #a0a8b4; --canvas-dim-label: #e8ecf2; --canvas-dim-bg: rgba(20, 25, 34, 0.88); --canvas-selection: #3ba4f6; --canvas-selection-fill: rgba(59, 164, 246, 0.28); }