/* ============================================================= theme-light.css - Light theme Applied via: Same CoinHODL identity as theme-dark.css, in the light surfaces from the design-system reference: Deep Navy ink, Ocean/Electric Blue brand, Aqua Mint secondary accent, Sky Blue tint, Cool Gray muted text, Light Gray page background. ============================================================= */ .theme-light { /* ---- Core surfaces ---- */ --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f1f5f9; --sidebar-bg: #ffffff; --line: rgba(11, 19, 32, .10); --line-soft: rgba(11, 19, 32, .06); /* .dc-table-head/.plan-table-head's own background - the CoinHODL brand's own Deep Navy (same token used for --text), matching the app's reference color palette/design-system doc. Deliberately NOT --surface-2 (which is the same #f1f5f9 as --bg in this theme, so a header using it sat at the exact same tone as the page behind it and read as blending in rather than as a distinct header bar). --table-head-text pairs with it - the usual --muted grayish-blue header label color has nowhere near enough contrast against a navy this dark, so headers get white label text instead, per that same reference. */ --table-head-bg: var(--coinhodl-deep-navy); --table-head-text: var(--ink-contrast); /* ---- Brand ---- */ --brand: var(--coinhodl-electric-blue); --brand-strong: #1d4ed8; --brand-tint: #e0f2fe; --brand-tint-soft: #f0f8ff; --accent: var(--coinhodl-aqua-mint); --accent-tint: #e6fbf7; /* ---- Text ---- */ --text: var(--coinhodl-deep-navy); --text-2: var(--coinhodl-slate); --muted: #7c8aa0; --ink-contrast: #ffffff; /* ---- Interactive ---- */ --hover: #eef6fa; --active-bg: #e0f2fe; --active: #1d4ed8; /* ---- Cards ---- Light gray card head - visibly cooler than the pure-white card body below it and the page background around it, so a card's header still reads as a separate region (dark theme doesn't have this problem: its --card-head is meaningfully darker than its --card-body). */ --card-head: #f1f5f9; --card-body: #ffffff; --card-text: var(--text); /* ---- Fields ---- */ --field-bg: #ffffff; --field-text: var(--text); --field-border: rgba(11, 19, 32, .16); --field-placeholder: #97a1ab; --field-focus-border: var(--coinhodl-electric-blue); --field-focus-ring: color-mix(in oklab, var(--coinhodl-electric-blue) 35%, white 45%); /* ---- Status ---- */ --success: #16a34a; --success-tint: #e8f8ee; --warn: #d97706; --warn-tint: #fef3e2; --error: #ef4444; --error-tint: #fdeaea; --info: #0ea5e9; --info-tint: #e0f2fe; --slate: var(--coinhodl-slate); --slate-tint: #f1f5f9; /* Table polish (Connected Exchanges design-system mockup, light variant) - hover tint for .dc-table-row/.plan-table-row and the table's own drop shadow. */ --table-row-hover: #f8fafc; --table-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .08); /* ---- Effects ---- */ --shadow-sm: 0 1px 2px rgba(11, 19, 32, .06); --shadow: 0 10px 28px rgba(11, 19, 32, .09); --shadow-lg: 0 24px 56px rgba(11, 19, 32, .14); }