/* ============================================================= theme-dark.css - Dark theme Applied via: CoinHODL identity: Deep Navy surfaces, Electric Blue primary, Aqua Mint secondary accent, Indigo info, high-contrast white type, muted blue-gray secondary text - taken from the CoinHODL design-system reference image. ============================================================= */ .theme-dark { /* ---- Core surfaces ---- */ --bg: #0b1320; --surface: #101a2b; --surface-2: #16233a; --sidebar-bg: #0d1626; --line: hsl(215 25% 45% / .28); --line-soft: hsl(215 25% 45% / .16); /* .dc-table-head/.plan-table-head's own background - the CoinHODL brand's own Deep Navy, matching the Connected Exchanges design-system mockup's dark-theme header (same brand navy as the light theme header, see theme-light.css's matching token). --table-head-text pairs with it using this theme's near-white --text. */ --table-head-bg: var(--coinhodl-deep-navy); --table-head-text: var(--text); /* ---- Brand (Electric Blue primary, lightened for AA contrast on dark bg) ---- */ --brand: var(--coinhodl-electric-blue); --brand-strong: #6d9dfb; --brand-tint: hsl(221 83% 53% / .22); --brand-tint-soft: hsl(221 83% 53% / .12); --accent: var(--coinhodl-aqua-mint); --accent-tint: hsl(173 80% 40% / .2); /* ---- Text ---- */ --text: #f5f7fa; --text-2: #a7b3c6; --muted: #8a97ab; --ink-contrast: #071019; /* ---- Interactive ---- */ --hover: hsl(215 28% 20%); --active-bg: hsl(221 70% 30% / .35); --active: #6d9dfb; /* ---- Cards ---- */ --card-head: #0d1626; --card-body: #101a2b; --card-text: var(--text); /* ---- Fields ---- */ --field-bg: #0e1728; --field-text: var(--text); --field-border: hsl(215 25% 45% / .35); --field-placeholder: #7c8aa0; --field-focus-border: var(--coinhodl-electric-blue); --field-focus-ring: color-mix(in oklab, var(--coinhodl-electric-blue) 45%, black 10%); /* ---- Status (brightened slightly from their base swatches for AA contrast as text/ icons on a dark background - see tokens.css's --btn-* roles for the flat, unlightened swatches used as filled-button backgrounds instead) ---- */ --success: #34d399; --success-tint: hsl(152 55% 18% / .55); --warn: #fbbf24; --warn-tint: hsl(38 60% 18% / .55); --error: #f87171; --error-tint: hsl(0 55% 20% / .55); --info: #38bdf8; --info-tint: hsl(199 89% 48% / .3); --slate: var(--coinhodl-slate); --slate-tint: hsl(215 19% 45% / .25); /* Table polish (Connected Exchanges design-system mockup, dark variant) - hover tint for .dc-table-row/.plan-table-row and the table's own drop shadow. */ --table-row-hover: #1e293b; --table-shadow: 0 1px 2px rgba(15, 23, 42, .5), 0 4px 12px rgba(15, 23, 42, .35); /* ---- Effects ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 10px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 56px rgba(0, 0, 0, .6); }