/* shared/styles/base.css Loaded once by the shell (index.html). Defines CSS variables and resets that every module can rely on. Modules should NOT redefine these variables — only consume them. */ /* Brand palette — copied exactly from the original replay-tool app so every module (chart engine and everything built after it) stays visually consistent. DO NOT invent new colors; add to this list if a module genuinely needs one, and note why. */ :root { --bg: #080F1C; --surface: #0E1928; --card: #122035; --border: #1C2E46; --text: #D4E2F2; --sub: #4E6A8A; /* Semantic colors — intentionally identical in both themes. These carry meaning (buy/sell, tool accents) rather than decoration, so they don't get re-themed the way chrome colors do. */ --up: #26A69A; --down: #EF5350; --accent: #F0A030; --blue: #3A82F0; --draw: #F0D030; --tpFill: rgba(38,166,154,0.18); --slFill: rgba(239,83,80,0.18); --txt-strong: #C0D4EC; --txt-mid: #9FBCE0; --txt-soft: #80A0C8; --txt-faint: #7A9EC4; --press-bg: #1C3050; --overlay-bg: rgba(8,15,28,0.85); /* Aliases so existing scaffold code (core/*, other modules) that already references --color-* keeps working without a rewrite. */ --color-bg: var(--bg); --color-surface: var(--surface); --color-border: var(--border); --color-text: var(--text); --color-text-dim: var(--sub); --color-accent: var(--blue); --color-success: var(--up); --color-danger: var(--down); --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', Consolas, monospace; --radius: 8px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; } /* Day / night mode — toggled via data-theme on . Canvas-drawn chart colors can't read CSS variables, so the chart-engine module keeps its own parallel CHART_THEMES JS object in sync with these — see modules/chart-engine/chart-engine.js. */ :root[data-theme="light"] { --bg: #F3F6FB; --surface: #FFFFFF; --card: #EAF0F8; --border: #CBD6E4; --text: #16253A; --sub: #5B7290; --txt-strong: #1D2E45; --txt-mid: #2F5273; --txt-soft: #3A6485; --txt-faint: #587A9C; --press-bg: #DCE7F4; --overlay-bg: rgba(243,246,251,0.88); --color-bg: var(--bg); --color-surface: var(--surface); --color-border: var(--border); --color-text: var(--text); --color-text-dim: var(--sub); } * { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } .module-shell { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-surface); } /* Utility: dark/light icon-swap pairs. Modules that show a themed PNG icon (one asset per theme, e.g. shared/icons/pen dark.png / pen light.png) render BOTH variants and tag them with these two classes; only the one matching the current data-theme stays visible. Kept here (not per-module) since several modules need the identical pattern — see data-loader.html, drawing-tools.html, trading-log.html. */ .theme-icon--dark { display: block; } .theme-icon--light { display: none; } :root[data-theme="light"] .theme-icon--dark { display: none; } :root[data-theme="light"] .theme-icon--light { display: block; }