/* theme.css – DARK-mode palette only (everything here fires only when ) */ /* 1) tokens */ [data-theme="dark"] { /* Colours */ --c-bg: #0d0f14; --c-surface: #13171f; --c-primary: #01d2ff; --c-success: #2ee670; --c-danger: #ff3659; --c-text: #e0e4ef; --c-text-muted: #8a90a2; /* Typography */ --font-sans: 'Inter','Helvetica Neue',sans-serif; --fs-base: 16px; --fs-sm: 14px; --fs-lg: 20px; --fs-xl: 32px; /* Layout */ --radius: 8px; --shadow: 0 0 20px rgba(1,210,255,.15); } /* 2) element styles (dark-only) */ [data-theme="dark"] body{ font-family: var(--font-sans); font-size: var(--fs-base); color: var(--c-text); background: var(--c-bg); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3{ font-weight:600; line-height:1.2; color:var(--c-text); } [data-theme="dark"] button, [data-theme="dark"] select{ border-radius:var(--radius); font-size:var(--fs-base); padding:.6rem 1.1rem; } [data-theme="dark"] .chart-container{ background:var(--c-surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; } /* (You can migrate additional dark-specific rules from neon.css here later) */