/* ============================================================ Lancephase — Dark theme Activated by [data-theme="dark"] on . Only the SEMANTIC aliases flip; brand primaries (blue, gradients) stay constant. ============================================================ */ :root[data-theme="dark"] { /* Text */ --text-strong: #F2F6FC; --text-body: #C5CEDC; --text-muted: #8C97A8; --text-link: var(--lp-blue-300); /* Surfaces */ --surface-page: #0B1220; --surface-subtle: #0F1828; --surface-card: #16202F; --surface-dark: #080D17; /* footer / sidebar — darker than page */ --surface-inverse: #243044; /* "dark" buttons stay visible on dark bg */ --surface-nav: rgba(11,18,32,0.82); --surface-track: #1E2940; /* Accent soft tint */ --color-accent-soft: rgba(18,145,249,0.16); /* Borders */ --border-subtle: #243044; --border-default: #2E3C52; --border-strong: #3A4A63; /* Danger text lightened for >=4.5:1 on dark surfaces (form validation). */ --danger-text: #FF8A80; /* Neutral ramp tints used directly as backgrounds */ --lp-gray-50: #1A2335; --lp-gray-100: #1E2940; /* Band aliases — restore the original dark navy band + light-on-dark text so dark mode is visually unchanged after the theme refactor. */ --band-bg: var(--lp-gradient-dark); /* the original navy band gradient */ --band-ink: #F2F6FC; --band-body: #C5CEDC; --band-muted: var(--text-on-dark-muted); /* #9FB0C6 */ --band-eyebrow: var(--lp-blue-300); /* soft blue — readable on dark */ --band-line: rgba(255,255,255,0.10); --band-line-2: rgba(255,255,255,0.20); --band-chip-bg: #0B1424; --band-ring: rgba(117,198,252,0.40); /* original step-badge ring */ --band-wash: rgba(255,255,255,0.06); /* original ghost-button hover */ } /* Smooth the flip */ html, body { transition: background-color var(--dur-base, .22s) var(--ease-out, ease); }