/* ============================================================================= NORTHGIVEN THEME SYSTEM Design tokens: light mode (default) + dark mode via data-theme="dark" System preference followed automatically; manual override via localStorage. Load this file FIRST, before any page-specific CSS. Companion: /js/theme.js (sets data-theme on before first paint) ============================================================================= */ /* ── Light Mode Tokens (:root) ────────────────────────────────────────────── */ :root { /* color-scheme declaration for browser chrome (scrollbars, inputs, etc.) */ color-scheme: light; /* Core palette */ --ink: #0f0f0f; --paper: #faf9f7; --warm: #c8a87c; --warm-light: #f0e6d6; --accent: #3d5a4c; --accent-light: #e8efe9; --muted: #6b6560; --border: #e0dbd5; --error: #c0392b; --error-light: #fde8e8; --success: #3d5a4c; --success-light: #e8efe9; --white: #ffffff; /* Hover / active states */ --ink-hover: #2a2a2a; --accent-hover: #345248; --accent-dark: #2d4437; --error-hover: #a93226; --warm-hover: #d4b88e; /* Rust (landing page blocker indicators) */ --rust: #c0392b; --rust-light: #fdf0ee; /* Landing page matching-preview chips */ --chip-blocker-border: #f0c8c3; --chip-blocker-text: #8b1a12; --chip-trust-border: #c0d4c8; --chip-trust-text: #234030; /* Semantic aliases (task spec tokens) */ --color-bg-primary: var(--paper); --color-bg-secondary: var(--white); /* card / container bg */ --color-bg-tertiary: #f5f3f0; /* nested elements, subtler bg */ --color-text-primary: var(--ink); --color-text-secondary: var(--muted); --color-text-inverse: var(--paper); /* text on dark buttons */ --color-border: var(--border); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-text: #ffffff; /* text on accent-bg elements */ --color-error: var(--error); --color-success: var(--success); --color-warning: #b45309; /* ── App-level layout tokens (new design system layer) ─────────────────── */ /* Page / surface backgrounds */ --app-bg: #F3EFE8; --app-surface: #FFFDF9; --app-surface-raised: #F8F4EE; /* App borders */ --app-border: #D1C8BC; --app-border-strong: #AFA69A; /* App text */ --app-text: #11100E; --app-text-muted: #5F5850; --app-label: #6B645D; /* Control states */ --control-bg: #FFFDF9; --control-border: #AFA69A; --control-selected-bg: #E7F0EA; --control-selected-border: #3F5F50; --control-selected-text: #1F3A2E; --control-unselected-border: #AFA69A; /* Disabled state */ --control-disabled-bg: #F0EDE8; --control-disabled-text: #A09890; /* Fun-card visibility pills */ --fun-matches-bg: #EDE9F8; --fun-matches-text: #5b21b6; --fun-matches-border: #c4b5fd; --fun-shared-bg: #FDF6E3; --fun-shared-text: #78600A; --fun-shared-border: #fcd34d; --fun-type-item-hover-bg: var(--control-selected-bg); /* Divider */ --app-divider: #E0D8D0; /* Focus ring */ --app-focus-ring: #3F5F50; /* Shadow */ --app-shadow: rgba(0, 0, 0, 0.08); --app-shadow-sm: rgba(0, 0, 0, 0.05); --app-shadow-md: rgba(0, 0, 0, 0.12); /* Toast */ --toast-bg: #11100E; --toast-text: #F4EFE7; /* Modal */ --modal-bg: #FFFDF9; /* Bottom nav */ --bottom-nav-bg: #FFFDF9; --bottom-nav-height: 58px; /* Semantic state colors */ --danger-text: #BA3F34; --danger-bg: #FFF4F1; --danger-border: #E5B8B3; --success-text: #2A5C3E; --success-bg: #EBF5EE; --success-border: #9ECFB0; --warning-text: #7A4C00; --warning-bg: #FFF8EC; --warning-border: #E8C97A; /* Section accent colors */ --section-accent-green: #3F5F50; --section-accent-gold: #C28840; --section-accent-red: #BA3F34; /* Message bubbles */ --color-message-sent-bg: var(--accent); --color-message-sent-text: #ffffff; --color-message-received-bg: var(--white); --color-message-received-text: var(--ink); --color-message-received-border: var(--border); /* Shimmer (loading skeleton) */ --color-shimmer-bg: #ede8e1; --color-shimmer-highlight: #f8f5f2; /* Badges */ --color-badge-bg: var(--accent-light); --color-badge-text: var(--accent); /* Inputs */ --color-input-bg: var(--white); --color-input-border: var(--border); --color-input-focus: var(--accent); /* Overlays / shadows */ --color-overlay: rgba(15, 15, 15, 0.5); --color-overlay-light: rgba(0, 0, 0, 0.35); /* lighter backdrop (mobile menu) */ --color-shadow: rgba(0, 0, 0, 0.08); --color-shadow-sm: rgba(0, 0, 0, 0.06); --color-shadow-md: rgba(0, 0, 0, 0.12); --color-shadow-lg: rgba(0, 0, 0, 0.15); /* Focus ring (ADA: 3:1 contrast against adjacent colours) */ --color-focus-ring: var(--accent); --color-focus-ring-offset: var(--paper); /* Fit-label palette: sage-to-stone spectrum (ADA AA compliant, colorblind-safe) */ --fit-strong-bg: #E2EBE0; --fit-strong-text: #2D4A32; --fit-promising-bg: #E7ECE3; --fit-promising-text: #3D5A40; --fit-mixed-bg: #EAECE6; --fit-mixed-text: #4A5544; --fit-discuss-bg: #EDEBE7; --fit-discuss-text: #585247; /* Account status badges */ --status-selective-bg: #fff3e0; --status-selective-text: #b45309; --status-focused-bg: #fce4ec; --status-focused-text: #c2185b; --status-partnered-bg: #f3e5f5; --status-partnered-text: #7b1fa2; --status-hidden-bg: #f0f0f0; --status-hidden-text: #555555; /* Link badges (relationship status) */ --link-badge-link-bg: #e8f4fd; --link-badge-link-border: #90c9f0; --link-badge-link-text: #1a5f8b; --link-badge-pending-bg: #fdf3e0; --link-badge-pending-border: #e8c56e; --link-badge-pending-text: #7a5200; --link-badge-dt-bg: #e8f5e9; --link-badge-dt-border: #81c784; --link-badge-dt-text: #1b5e20; /* ── Compatibility alias layer — maps legacy app.css tokens to design system ─ These tokens are used by app.css with var(token-name, hardcoded-fallback). Without these definitions, dark mode falls through to the hardcoded light fallbacks (#222, #555, #888, #fff, #f5f5f5), causing unreadable contrast. LIGHT MODE values — mirrors the app-level tokens above. */ --bg: var(--app-bg); /* var(--bg, ...) → page bg */ --surface: var(--app-surface); /* container / sheet bg */ --surface-alt: var(--app-surface-raised); /* raised / nested surface */ --surface-hover: #EDE8E1; /* hover state for surfaces */ --app-surface-alt: var(--app-surface-raised); --app-surface-hover: #EDE8E1; --input-bg: var(--control-bg); /* input field bg */ --text: var(--app-text); /* primary text */ --text-primary: var(--app-text); /* alias */ --text-secondary: var(--app-text-muted); /* secondary / subdued text */ --text-muted: var(--app-label); /* muted / hint text */ --muted-text: var(--app-label); /* alias */ /* Soft accent (invitation banner — warm amber in light mode) */ --accent-soft: #FFF0DE; --accent-soft-hover: #FFE6C8; /* Teal tier chip (compatibility page) */ --teal-light: #E4F2F5; --teal-dark: #1A5D6C; /* Group match cards */ --group-card-bg: linear-gradient(135deg, #fdf9f4 0%, #fff8ed 100%); --group-card-border: #c8a87a; --group-label-text: #8b5e3c; --group-label-bg: #f4e8d9; --group-member-bg: #f8f2eb; --group-member-border: #e0d3c4; --group-avatar-bg: #f4e8d9; /* Focus request banner */ --focus-request-bg: linear-gradient(135deg, #fce4ec, #fff3e0); --focus-request-border: #f8bbd9; --focus-btn-border: #f48fb1; --focus-btn-text: #c2185b; --focus-btn-hover-bg: #fce4ec; /* Verification / notification banners */ --notice-bg: #fffbf0; --notice-border: #e8d5a0; --notice-text: var(--ink); /* Drift / consent banners (inline in app.js) */ --drift-banner-bg: #f0f6f2; --drift-banner-border: #c8e0d4; --drift-banner-text: #2c5e42; /* Bodies & Boundaries card states */ --bb-panel-bg: #f9f7f4; --bb-waiting-bg: #f5f3f0; --bb-invite-bg: linear-gradient(135deg, #f2ede6 0%, #eaf0ea 100%); --bb-active-bg: linear-gradient(135deg, #eaf0ea 0%, #f0f5f0 100%); --bb-declined-bg: #f8f6f3; /* Danger zone */ --danger-zone-border: #e8d5d5; /* Reauth modal */ --reauth-bg: #ffffff; --reauth-title: #1a1a1a; --reauth-body: #666666; --reauth-input-border: #dddddd; /* Form success */ --form-success-bg: #f0fdf4; --form-success-text: #166534; --form-success-border: #bbf7d0; /* Scrollbar */ --scrollbar-thumb: #cccccc; /* Identity settings selected alt bg */ --selected-bg-alt: #f8f0ee; /* Subtle page tones */ --bg-fafafa: #fafafa; --bg-faf8f5: #faf8f5; --bg-fafaf6: #fafaf6; --bg-faf7f4: #faf7f4; --warm-border-subtle: #e8e4df; --warm-border-subtle-light: #f0e8e8; /* s- utility grays (semantic mappings for dark mode overrides) */ --util-gray-nearblack: #1a1a1a; --util-gray-333: #333333; --util-gray-444: #444444; --util-gray-555: #555555; --util-gray-666: #666666; --util-gray-777: #777777; --util-gray-888: #888888; --util-gray-999: #999999; --util-gray-aaa: #aaaaaa; /* Warm brown tones used in ui */ --util-warm-brown: #8b6246; --util-warm-brown2: #7a5230; --util-warm-brown3: #7a4a10; --util-amber: #7a5500; /* Doc / prose text */ --util-doc-text: #1a1a1a; --util-prose-dark: #333333; --util-prose-mid: #444444; /* Hint / note box */ --hint-box-bg: #faf8f5; --hint-box-text: #555555; /* s-section-divider soft */ --divider-soft: #e8e4df; /* ── Group Chat Color Palette ────────────────────────────────────────────── 8 hue families × 3 shades each. All pass WCAG AA (≥4.5:1) in both modes. Hue 0 = Sage Green (your side — always). Hues 1-7 = colorblind-safe spread. Naming: --gc-hue-{H}-s{S}-bg (background), --gc-hue-{H}-s{S}-text, --gc-hue-{H}-accent Accent = left-bar and sender-label color (slightly deeper than lightest shade). ─────────────────────────────────────────────────────────────────────────── */ /* Hue 0 — Sage Green (your linked partners; distinct shades of the app accent) */ --gc-hue-0-s0-bg: #d4e8dd; --gc-hue-0-s0-text: #0f3020; --gc-hue-0-s1-bg: #b8d9c8; --gc-hue-0-s1-text: #0f3020; --gc-hue-0-s2-bg: #9fceba; --gc-hue-0-s2-text: #0a2818; --gc-hue-0-accent: #3d6e52; /* Hue 1 — Amber / Gold */ --gc-hue-1-s0-bg: #fef3c7; --gc-hue-1-s0-text: #3d2800; --gc-hue-1-s1-bg: #fde68a; --gc-hue-1-s1-text: #3d2800; --gc-hue-1-s2-bg: #fcd34d; --gc-hue-1-s2-text: #3d2800; --gc-hue-1-accent: #b07a00; /* Hue 2 — Cornflower Blue */ --gc-hue-2-s0-bg: #dbeafe; --gc-hue-2-s0-text: #1e3a5f; --gc-hue-2-s1-bg: #bfdbfe; --gc-hue-2-s1-text: #1e3a5f; --gc-hue-2-s2-bg: #93c5fd; --gc-hue-2-s2-text: #1e3a5f; --gc-hue-2-accent: #2563b0; /* Hue 3 — Dusty Rose */ --gc-hue-3-s0-bg: #fce7f3; --gc-hue-3-s0-text: #5a1235; --gc-hue-3-s1-bg: #fbcfe8; --gc-hue-3-s1-text: #5a1235; --gc-hue-3-s2-bg: #f9a8d4; --gc-hue-3-s2-text: #5a1235; --gc-hue-3-accent: #9d174d; /* Hue 4 — Lavender / Violet */ --gc-hue-4-s0-bg: #ede9fe; --gc-hue-4-s0-text: #2e1065; --gc-hue-4-s1-bg: #ddd6fe; --gc-hue-4-s1-text: #2e1065; --gc-hue-4-s2-bg: #c4b5fd; --gc-hue-4-s2-text: #2e1065; --gc-hue-4-accent: #5b21b6; /* Hue 5 — Terracotta / Orange */ --gc-hue-5-s0-bg: #ffedd5; --gc-hue-5-s0-text: #5e2300; --gc-hue-5-s1-bg: #fed7aa; --gc-hue-5-s1-text: #5e2300; --gc-hue-5-s2-bg: #fdba74; --gc-hue-5-s2-text: #5e2300; --gc-hue-5-accent: #c2410c; /* Hue 6 — Teal / Cyan */ --gc-hue-6-s0-bg: #ccfbf1; --gc-hue-6-s0-text: #044035; --gc-hue-6-s1-bg: #99f6e4; --gc-hue-6-s1-text: #044035; --gc-hue-6-s2-bg: #5eead4; --gc-hue-6-s2-text: #044035; --gc-hue-6-accent: #0d766a; /* Hue 7 — Indigo */ --gc-hue-7-s0-bg: #e0e7ff; --gc-hue-7-s0-text: #2730a0; --gc-hue-7-s1-bg: #c7d2fe; --gc-hue-7-s1-text: #2730a0; --gc-hue-7-s2-bg: #a5b4fc; --gc-hue-7-s2-text: #2730a0; --gc-hue-7-accent: #3730a3; } /* ── Dark Mode Tokens ([data-theme="dark"]) ───────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; /* Core palette — warm dark tones, no pure black */ --ink: #ede9e3; --paper: #1c1917; --warm: #c8a87c; /* warm gold works on dark bg */ --warm-light: #2a231b; /* dark warm background */ --accent: #6b9e84; /* brighter sage (6:1 contrast on paper) */ --accent-light: #1a2e22; /* dark accent bg */ --muted: #998f89; /* 5.1:1 on paper ✓ */ --border: #2e2a25; /* subtle dark border */ --error: #e56e5e; /* bright red for dark bg */ --error-light: #2e1510; /* dark error bg */ --success: #6b9e84; --success-light: #1a2e22; --white: #242018; /* "card" bg — slightly lighter than paper */ /* Hover / active states */ --ink-hover: #ffffff; --accent-hover: #5d8e74; --accent-dark: #4a7a60; --error-hover: #c9473a; --warm-hover: #d4b88e; /* Rust */ --rust: #e06050; --rust-light: #2e1818; /* Landing page matching-preview chips */ --chip-blocker-border: #6a2828; --chip-blocker-text: #e87060; --chip-trust-border: #2a4a3a; --chip-trust-text: #7ab8a0; /* Semantic aliases */ --color-bg-primary: var(--paper); --color-bg-secondary: var(--white); --color-bg-tertiary: #282420; --color-text-primary: var(--ink); --color-text-secondary: var(--muted); --color-text-inverse: #1c1917; --color-border: var(--border); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-text: #1c1917; --color-error: var(--error); --color-success: var(--success); --color-warning: #e8a050; /* ── App-level layout tokens — dark mode ─────────────────────────────────*/ --app-bg: #11100E; --app-surface: #242018; --app-surface-raised: #2C271E; --app-border: #4A4035; --app-border-strong: #756A5B; --app-text: #F4EFE7; --app-text-muted: #BDB3A8; --app-label: #AFA59A; --control-bg: #201D18; --control-border: #756A5B; --control-selected-bg: #173528; --control-selected-border: #84B49A; --control-selected-text: #DDEFE5; --control-unselected-border: #756A5B; --control-disabled-bg: #1E1B16; --control-disabled-text: #5A544C; --fun-matches-bg: #2e1065; --fun-matches-text: #c4b5fd; --fun-matches-border: #5b21b6; --fun-shared-bg: #3d2800; --fun-shared-text: #fcd34d; --fun-shared-border: #b07a00; --fun-type-item-hover-bg: var(--control-selected-bg); --app-divider: #3A3228; --app-focus-ring: #84B49A; --app-shadow: rgba(0, 0, 0, 0.4); --app-shadow-sm: rgba(0, 0, 0, 0.3); --app-shadow-md: rgba(0, 0, 0, 0.5); --toast-bg: #F4EFE7; --toast-text: #11100E; --modal-bg: #242018; --bottom-nav-bg: #1C1917; --bottom-nav-height: 58px; --danger-text: #E07165; --danger-bg: #341B17; --danger-border: #A4493F; --success-text: #7AC890; --success-bg: #172818; --success-border: #3A6848; --warning-text: #E8A050; --warning-bg: #2A1E08; --warning-border: #806030; --section-accent-green: #84B49A; --section-accent-gold: #C28840; --section-accent-red: #E07165; /* Message bubbles */ --color-message-sent-bg: #4a7a60; --color-message-sent-text: #ede9e3; --color-message-received-bg: #2a2620; --color-message-received-text: var(--ink); --color-message-received-border: var(--border); /* Shimmer */ --color-shimmer-bg: #2a2520; --color-shimmer-highlight: #3a3530; /* Badges */ --color-badge-bg: var(--accent-light); --color-badge-text: var(--accent); /* Inputs */ --color-input-bg: #282420; --color-input-border: #3a3530; --color-input-focus: var(--accent); /* Overlays / shadows */ --color-overlay: rgba(0, 0, 0, 0.75); --color-overlay-light: rgba(0, 0, 0, 0.6); --color-shadow: rgba(0, 0, 0, 0.4); --color-shadow-sm: rgba(0, 0, 0, 0.3); --color-shadow-md: rgba(0, 0, 0, 0.45); --color-shadow-lg: rgba(0, 0, 0, 0.6); /* Focus ring */ --color-focus-ring: #6b9e84; --color-focus-ring-offset: #1c1917; /* Fit-label palette — lightened for dark bg readability */ --fit-strong-bg: #1e2e20; --fit-strong-text: #8abf98; --fit-promising-bg: #1e2a20; --fit-promising-text: #7ab090; --fit-mixed-bg: #222820; --fit-mixed-text: #8a9888; --fit-discuss-bg: #252220; --fit-discuss-text: #908878; /* Account status badges */ --status-selective-bg: #2d2318; --status-selective-text: #e8a050; --status-focused-bg: #2d1520; --status-focused-text: #e87aaa; --status-partnered-bg: #281a30; --status-partnered-text: #c07ad8; --status-hidden-bg: #252220; --status-hidden-text: #a0a0a0; /* Link badges */ --link-badge-link-bg: #152030; --link-badge-link-border: #3a6a90; --link-badge-link-text: #7ab8e0; --link-badge-pending-bg: #281e0e; --link-badge-pending-border: #806030; --link-badge-pending-text: #d4a050; --link-badge-dt-bg: #172818; --link-badge-dt-border: #4a8a50; --link-badge-dt-text: #7ac880; /* ── Compatibility alias layer — dark mode overrides ───────────────────── */ --bg: var(--app-bg); --surface: var(--app-surface); --surface-alt: var(--app-surface-raised); --surface-hover: #2E2920; --app-surface-alt: var(--app-surface-raised); --app-surface-hover: #2E2920; --input-bg: var(--control-bg); --text: var(--app-text); --text-primary: var(--app-text); --text-secondary: var(--app-text-muted); --text-muted: var(--app-label); --muted-text: var(--app-label); /* Soft accent — muted warm amber in dark mode */ --accent-soft: #2D2010; --accent-soft-hover: #382814; /* Teal tier chip — dark mode */ --teal-light: #0F2C32; --teal-dark: #7ECBDA; /* Group match cards */ --group-card-bg: linear-gradient(135deg, #2a2318 0%, #28200e 100%); --group-card-border: #7a6040; --group-label-text: #c8956a; --group-label-bg: #2d2018; --group-member-bg: #252018; --group-member-border: #3a3028; --group-avatar-bg: #2d2018; /* Focus request banner */ --focus-request-bg: linear-gradient(135deg, #2d1520, #281e0e); --focus-request-border: #6a3048; --focus-btn-border: #a04070; --focus-btn-text: #e87aaa; --focus-btn-hover-bg: #2d1520; /* Verification / notification banners */ --notice-bg: #252010; --notice-border: #6a5820; --notice-text: #e8d898; /* Drift / consent banners */ --drift-banner-bg: #1a2820; --drift-banner-border: #3a6050; --drift-banner-text: #7abca0; /* Bodies & Boundaries card states */ --bb-panel-bg: #212018; --bb-waiting-bg: #1e1c18; --bb-invite-bg: linear-gradient(135deg, #2a2218 0%, #1e2820 100%); --bb-active-bg: linear-gradient(135deg, #1e2820 0%, #1e2420 100%); --bb-declined-bg: #201e18; /* Danger zone */ --danger-zone-border: #4a2828; /* Reauth modal */ --reauth-bg: #242018; --reauth-title: #ede9e3; --reauth-body: #998f89; --reauth-input-border: #3a3530; /* Form success */ --form-success-bg: #172818; --form-success-text: #7abf84; --form-success-border: #3a6848; /* Scrollbar */ --scrollbar-thumb: #3a3530; /* Identity settings */ --selected-bg-alt: #2a1e18; /* Subtle page tones */ --bg-fafafa: #222018; --bg-faf8f5: #232018; --bg-fafaf6: #222018; --bg-faf7f4: #212018; --warm-border-subtle: #3a3228; --warm-border-subtle-light: #3a2c2c; /* s- utility grays (lightened for dark bg) */ --util-gray-nearblack: #e0dcd6; --util-gray-333: #d8d4ce; --util-gray-444: #ccc8c2; --util-gray-555: #b8b4ae; --util-gray-666: #a8a49e; --util-gray-777: #9a968f; --util-gray-888: #aaa69e; --util-gray-999: #b4b0a8; --util-gray-aaa: #c0bcb5; /* Warm brown tones */ --util-warm-brown: #d0906a; --util-warm-brown2: #c07858; --util-warm-brown3: #c07840; --util-amber: #d4a050; /* Doc / prose text */ --util-doc-text: #ede9e3; --util-prose-dark: #d8d4ce; --util-prose-mid: #ccc8c2; /* Hint / note box */ --hint-box-bg: #232018; --hint-box-text: #b8b4ae; /* s-section-divider soft */ --divider-soft: #3a3228; /* ── Group Chat Palette — Dark Mode ──────────────────────────────────────── */ /* Muted dark backgrounds; light saturated text. All WCAG AA ≥4.5:1. */ --gc-hue-0-s0-bg: #1e3028; --gc-hue-0-s0-text: #c8e8d8; --gc-hue-0-s1-bg: #1a2822; --gc-hue-0-s1-text: #b8d8c8; --gc-hue-0-s2-bg: #162018; --gc-hue-0-s2-text: #a8c8b8; --gc-hue-0-accent: #5fa880; --gc-hue-1-s0-bg: #2d2000; --gc-hue-1-s0-text: #fde68a; --gc-hue-1-s1-bg: #251a00; --gc-hue-1-s1-text: #fcd34d; --gc-hue-1-s2-bg: #1e1400; --gc-hue-1-s2-text: #fbbf24; --gc-hue-1-accent: #d4a020; --gc-hue-2-s0-bg: #0f1e3a; --gc-hue-2-s0-text: #93c5fd; --gc-hue-2-s1-bg: #0c1832; --gc-hue-2-s1-text: #7dd3fc; --gc-hue-2-s2-bg: #091228; --gc-hue-2-s2-text: #60a5fa; --gc-hue-2-accent: #60a5fa; --gc-hue-3-s0-bg: #2d1020; --gc-hue-3-s0-text: #f9a8d4; --gc-hue-3-s1-bg: #250d1a; --gc-hue-3-s1-text: #f472b6; --gc-hue-3-s2-bg: #1c0a14; --gc-hue-3-s2-text: #ec4899; --gc-hue-3-accent: #f472b6; --gc-hue-4-s0-bg: #1e1035; --gc-hue-4-s0-text: #c4b5fd; --gc-hue-4-s1-bg: #180c2c; --gc-hue-4-s1-text: #a78bfa; --gc-hue-4-s2-bg: #120822; --gc-hue-4-s2-text: #8b5cf6; --gc-hue-4-accent: #a78bfa; --gc-hue-5-s0-bg: #2d1400; --gc-hue-5-s0-text: #fdba74; --gc-hue-5-s1-bg: #251000; --gc-hue-5-s1-text: #fb923c; --gc-hue-5-s2-bg: #1c0c00; --gc-hue-5-s2-text: #f97316; --gc-hue-5-accent: #f97316; --gc-hue-6-s0-bg: #042828; --gc-hue-6-s0-text: #5eead4; --gc-hue-6-s1-bg: #032020; --gc-hue-6-s1-text: #2dd4bf; --gc-hue-6-s2-bg: #021818; --gc-hue-6-s2-text: #14b8a6; --gc-hue-6-accent: #2dd4bf; --gc-hue-7-s0-bg: #1a1c40; --gc-hue-7-s0-text: #a5b4fc; --gc-hue-7-s1-bg: #141838; --gc-hue-7-s1-text: #818cf8; --gc-hue-7-s2-bg: #0e1230; --gc-hue-7-s2-text: #6366f1; --gc-hue-7-accent: #818cf8; } /* ── System Preference: Dark Mode ─────────────────────────────────────────── */ /* Applied when user hasn't manually chosen a theme (localStorage empty / "system") */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #ede9e3; --paper: #1c1917; --warm: #c8a87c; --warm-light: #2a231b; --accent: #6b9e84; --accent-light: #1a2e22; --muted: #998f89; --border: #2e2a25; --error: #e56e5e; --error-light: #2e1510; --success: #6b9e84; --success-light: #1a2e22; --white: #242018; --ink-hover: #ffffff; --accent-hover: #5d8e74; --accent-dark: #4a7a60; --error-hover: #c9473a; --warm-hover: #d4b88e; --rust: #e06050; --rust-light: #2e1818; --chip-blocker-border: #6a2828; --chip-blocker-text: #e87060; --chip-trust-border: #2a4a3a; --chip-trust-text: #7ab8a0; --color-bg-primary: var(--paper); --color-bg-secondary: var(--white); --color-bg-tertiary: #282420; --color-text-primary: var(--ink); --color-text-secondary: var(--muted); --color-text-inverse: #1c1917; --color-border: var(--border); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-text: #1c1917; --color-error: var(--error); --color-success: var(--success); --color-warning: #e8a050; /* ── App-level layout tokens — system dark mode ──────────────────────── */ --app-bg: #11100E; --app-surface: #242018; --app-surface-raised: #2C271E; --app-border: #4A4035; --app-border-strong: #756A5B; --app-text: #F4EFE7; --app-text-muted: #BDB3A8; --app-label: #AFA59A; --control-bg: #201D18; --control-border: #756A5B; --control-selected-bg: #173528; --control-selected-border: #84B49A; --control-selected-text: #DDEFE5; --control-unselected-border: #756A5B; --control-disabled-bg: #1E1B16; --control-disabled-text: #5A544C; --fun-matches-bg: #2e1065; --fun-matches-text: #c4b5fd; --fun-matches-border: #5b21b6; --fun-shared-bg: #3d2800; --fun-shared-text: #fcd34d; --fun-shared-border: #b07a00; --fun-type-item-hover-bg: var(--control-selected-bg); --app-divider: #3A3228; --app-focus-ring: #84B49A; --app-shadow: rgba(0, 0, 0, 0.4); --app-shadow-sm: rgba(0, 0, 0, 0.3); --app-shadow-md: rgba(0, 0, 0, 0.5); --toast-bg: #F4EFE7; --toast-text: #11100E; --modal-bg: #242018; --bottom-nav-bg: #1C1917; --bottom-nav-height: 58px; --danger-text: #E07165; --danger-bg: #341B17; --danger-border: #A4493F; --success-text: #7AC890; --success-bg: #172818; --success-border: #3A6848; --warning-text: #E8A050; --warning-bg: #2A1E08; --warning-border: #806030; --section-accent-green: #84B49A; --section-accent-gold: #C28840; --section-accent-red: #E07165; --color-message-sent-bg: #4a7a60; --color-message-sent-text: #ede9e3; --color-message-received-bg: #2a2620; --color-message-received-text: var(--ink); --color-message-received-border: var(--border); --color-shimmer-bg: #2a2520; --color-shimmer-highlight: #3a3530; --color-badge-bg: var(--accent-light); --color-badge-text: var(--accent); --color-input-bg: #282420; --color-input-border: #3a3530; --color-input-focus: var(--accent); --color-overlay: rgba(0, 0, 0, 0.75); --color-overlay-light: rgba(0, 0, 0, 0.6); --color-shadow: rgba(0, 0, 0, 0.4); --color-shadow-sm: rgba(0, 0, 0, 0.3); --color-shadow-md: rgba(0, 0, 0, 0.45); --color-shadow-lg: rgba(0, 0, 0, 0.6); --color-focus-ring: #6b9e84; --color-focus-ring-offset: #1c1917; --fit-strong-bg: #1e2e20; --fit-strong-text: #8abf98; --fit-promising-bg: #1e2a20; --fit-promising-text: #7ab090; --fit-mixed-bg: #222820; --fit-mixed-text: #8a9888; --fit-discuss-bg: #252220; --fit-discuss-text: #908878; --status-selective-bg: #2d2318; --status-selective-text: #e8a050; --status-focused-bg: #2d1520; --status-focused-text: #e87aaa; --status-partnered-bg: #281a30; --status-partnered-text: #c07ad8; --status-hidden-bg: #252220; --status-hidden-text: #a0a0a0; --link-badge-link-bg: #152030; --link-badge-link-border: #3a6a90; --link-badge-link-text: #7ab8e0; --link-badge-pending-bg: #281e0e; --link-badge-pending-border: #806030; --link-badge-pending-text: #d4a050; --link-badge-dt-bg: #172818; --link-badge-dt-border: #4a8a50; --link-badge-dt-text: #7ac880; --group-card-bg: linear-gradient(135deg, #2a2318 0%, #28200e 100%); --group-card-border: #7a6040; --group-label-text: #c8956a; --group-label-bg: #2d2018; --group-member-bg: #252018; --group-member-border: #3a3028; --group-avatar-bg: #2d2018; --focus-request-bg: linear-gradient(135deg, #2d1520, #281e0e); --focus-request-border: #6a3048; --focus-btn-border: #a04070; --focus-btn-text: #e87aaa; --focus-btn-hover-bg: #2d1520; --notice-bg: #252010; --notice-border: #6a5820; --notice-text: #e8d898; --drift-banner-bg: #1a2820; --drift-banner-border: #3a6050; --drift-banner-text: #7abca0; --bb-panel-bg: #212018; --bb-waiting-bg: #1e1c18; --bb-invite-bg: linear-gradient(135deg, #2a2218 0%, #1e2820 100%); --bb-active-bg: linear-gradient(135deg, #1e2820 0%, #1e2420 100%); --bb-declined-bg: #201e18; --danger-zone-border: #4a2828; --reauth-bg: #242018; --reauth-title: #ede9e3; --reauth-body: #998f89; --reauth-input-border: #3a3530; --form-success-bg: #172818; --form-success-text: #7abf84; --form-success-border: #3a6848; --scrollbar-thumb: #3a3530; --selected-bg-alt: #2a1e18; --bg-fafafa: #222018; --bg-faf8f5: #232018; --bg-fafaf6: #222018; --bg-faf7f4: #212018; --warm-border-subtle: #3a3228; --warm-border-subtle-light: #3a2c2c; --util-gray-nearblack: #e0dcd6; --util-gray-333: #d8d4ce; --util-gray-444: #ccc8c2; --util-gray-555: #b8b4ae; --util-gray-666: #a8a49e; --util-gray-777: #9a968f; --util-gray-888: #aaa69e; --util-gray-999: #b4b0a8; --util-gray-aaa: #c0bcb5; --util-warm-brown: #d0906a; --util-warm-brown2: #c07858; --util-warm-brown3: #c07840; --util-amber: #d4a050; --util-doc-text: #ede9e3; --util-prose-dark: #d8d4ce; --util-prose-mid: #ccc8c2; --hint-box-bg: #232018; --hint-box-text: #b8b4ae; --divider-soft: #3a3228; /* ── Compatibility alias layer — system dark mode ───────────────────── */ --bg: var(--app-bg); --surface: var(--app-surface); --surface-alt: var(--app-surface-raised); --surface-hover: #2E2920; --app-surface-alt: var(--app-surface-raised); --app-surface-hover: #2E2920; --input-bg: var(--control-bg); --text: var(--app-text); --text-primary: var(--app-text); --text-secondary: var(--app-text-muted); --text-muted: var(--app-label); --muted-text: var(--app-label); --accent-soft: #2D2010; --accent-soft-hover: #382814; --teal-light: #0F2C32; --teal-dark: #7ECBDA; /* Group Chat Palette — dark (mirrors [data-theme="dark"] block above) */ --gc-hue-0-s0-bg: #1e3028; --gc-hue-0-s0-text: #c8e8d8; --gc-hue-0-s1-bg: #1a2822; --gc-hue-0-s1-text: #b8d8c8; --gc-hue-0-s2-bg: #162018; --gc-hue-0-s2-text: #a8c8b8; --gc-hue-0-accent: #5fa880; --gc-hue-1-s0-bg: #2d2000; --gc-hue-1-s0-text: #fde68a; --gc-hue-1-s1-bg: #251a00; --gc-hue-1-s1-text: #fcd34d; --gc-hue-1-s2-bg: #1e1400; --gc-hue-1-s2-text: #fbbf24; --gc-hue-1-accent: #d4a020; --gc-hue-2-s0-bg: #0f1e3a; --gc-hue-2-s0-text: #93c5fd; --gc-hue-2-s1-bg: #0c1832; --gc-hue-2-s1-text: #7dd3fc; --gc-hue-2-s2-bg: #091228; --gc-hue-2-s2-text: #60a5fa; --gc-hue-2-accent: #60a5fa; --gc-hue-3-s0-bg: #2d1020; --gc-hue-3-s0-text: #f9a8d4; --gc-hue-3-s1-bg: #250d1a; --gc-hue-3-s1-text: #f472b6; --gc-hue-3-s2-bg: #1c0a14; --gc-hue-3-s2-text: #ec4899; --gc-hue-3-accent: #f472b6; --gc-hue-4-s0-bg: #1e1035; --gc-hue-4-s0-text: #c4b5fd; --gc-hue-4-s1-bg: #180c2c; --gc-hue-4-s1-text: #a78bfa; --gc-hue-4-s2-bg: #120822; --gc-hue-4-s2-text: #8b5cf6; --gc-hue-4-accent: #a78bfa; --gc-hue-5-s0-bg: #2d1400; --gc-hue-5-s0-text: #fdba74; --gc-hue-5-s1-bg: #251000; --gc-hue-5-s1-text: #fb923c; --gc-hue-5-s2-bg: #1c0c00; --gc-hue-5-s2-text: #f97316; --gc-hue-5-accent: #f97316; --gc-hue-6-s0-bg: #042828; --gc-hue-6-s0-text: #5eead4; --gc-hue-6-s1-bg: #032020; --gc-hue-6-s1-text: #2dd4bf; --gc-hue-6-s2-bg: #021818; --gc-hue-6-s2-text: #14b8a6; --gc-hue-6-accent: #2dd4bf; --gc-hue-7-s0-bg: #1a1c40; --gc-hue-7-s0-text: #a5b4fc; --gc-hue-7-s1-bg: #141838; --gc-hue-7-s1-text: #818cf8; --gc-hue-7-s2-bg: #0e1230; --gc-hue-7-s2-text: #6366f1; --gc-hue-7-accent: #818cf8; } } /* ── Theme Transition ─────────────────────────────────────────────────────── */ /* Only fires during intentional theme switch (class added/removed via theme.js) */ /* Wrapping in no-preference ensures instant switch for motion-sensitive users */ @media (prefers-reduced-motion: no-preference) { .theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after { transition: background-color 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; } } /* ── Focus Ring (global, ADA-compliant) ───────────────────────────────────── */ :focus-visible { outline: 2px solid var(--app-focus-ring, var(--color-focus-ring)); outline-offset: 2px; } /* ── Dark Mode — Input Fields ─────────────────────────────────────────────── */ [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .form-group select, [data-theme="dark"] .modal-content textarea, [data-theme="dark"] .bb-question-input, [data-theme="dark"] .chat-input-row input, [data-theme="dark"] .reauth-modal-input { background: var(--color-input-bg); border-color: var(--color-input-border); color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-group input, :root:not([data-theme="light"]) .form-group textarea, :root:not([data-theme="light"]) .form-group select, :root:not([data-theme="light"]) .modal-content textarea, :root:not([data-theme="light"]) .bb-question-input, :root:not([data-theme="light"]) .chat-input-row input, :root:not([data-theme="light"]) .reauth-modal-input { background: var(--color-input-bg); border-color: var(--color-input-border); color: var(--ink); } } /* ── Dark Mode — Message Bubbles ──────────────────────────────────────────── */ [data-theme="dark"] .msg-mine .msg-bubble { background: var(--color-message-sent-bg); color: var(--color-message-sent-text); } [data-theme="dark"] .msg-theirs .msg-bubble { background: var(--color-message-received-bg); color: var(--color-message-received-text); border-color: var(--color-message-received-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg-mine .msg-bubble { background: var(--color-message-sent-bg); color: var(--color-message-sent-text); } :root:not([data-theme="light"]) .msg-theirs .msg-bubble { background: var(--color-message-received-bg); color: var(--color-message-received-text); border-color: var(--color-message-received-border); } } /* ── Dark Mode — s- Utility Color Overrides ───────────────────────────────── */ /* These utility classes use hardcoded hex colors. Dark mode overrides use the CSS custom property equivalents defined above. */ :is([data-theme="dark"], :root:not([data-theme="light"])) .s-gray333, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-nearblack, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-nearblack2, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-prose-333, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-prose-333-mv, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-prose-333-mv2, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-doc-h3, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-doc-h3b, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-doc-h3c, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-doc-h2, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-doc-h2b, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-modal-title, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-card-item-title, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-card-title, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-h3-style, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-h2-style, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-h2-modal, :is([data-theme="dark"], :root:not([data-theme="light"])) .s-hero-ink { color: var(--util-gray-nearblack) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-gray333, :root:not([data-theme="light"]) .s-nearblack, :root:not([data-theme="light"]) .s-nearblack2, :root:not([data-theme="light"]) .s-prose-333, :root:not([data-theme="light"]) .s-prose-333-mv, :root:not([data-theme="light"]) .s-prose-333-mv2, :root:not([data-theme="light"]) .s-doc-h3, :root:not([data-theme="light"]) .s-doc-h3b, :root:not([data-theme="light"]) .s-doc-h3c, :root:not([data-theme="light"]) .s-doc-h2, :root:not([data-theme="light"]) .s-doc-h2b, :root:not([data-theme="light"]) .s-modal-title, :root:not([data-theme="light"]) .s-card-item-title, :root:not([data-theme="light"]) .s-card-title, :root:not([data-theme="light"]) .s-h3-style, :root:not([data-theme="light"]) .s-h2-style, :root:not([data-theme="light"]) .s-h2-modal, :root:not([data-theme="light"]) .s-hero-ink { color: var(--util-gray-nearblack) !important; } } /* The :is() selector with media query doesn't work for cross-media overrides, so we use a helper mixin approach for the remaining gray levels: */ [data-theme="dark"] .s-gray444, [data-theme="dark"] .s-prose-444, [data-theme="dark"] .s-prose-444-mv, [data-theme="dark"] .s-text095-444, [data-theme="dark"] .s-text09-444-mb, [data-theme="dark"] .s-text09-444-mt05, [data-theme="dark"] .s-text09-444-mt025, [data-theme="dark"] .s-text09-444-lh15, [data-theme="dark"] .s-checkbox-row, [data-theme="dark"] .s-checkbox-row2 { color: var(--util-gray-444); } [data-theme="dark"] .s-gray555, [data-theme="dark"] .s-text085-555, [data-theme="dark"] .s-text085-555-lh, [data-theme="dark"] .s-text085-555-mb, [data-theme="dark"] .s-text085-555-indent, [data-theme="dark"] .s-text09-555-mb1, [data-theme="dark"] .s-text09-555-mb125, [data-theme="dark"] .s-text09-555-lh, [data-theme="dark"] .s-text075-555-mt, [data-theme="dark"] .s-cell-sm555, [data-theme="dark"] .s-note-box, [data-theme="dark"] .s-overlay-dim { color: var(--util-gray-555); } [data-theme="dark"] .s-gray666, [data-theme="dark"] .s-text085-666, [data-theme="dark"] .s-text088-666, [data-theme="dark"] .s-desc-text, [data-theme="dark"] .s-td-sm, [data-theme="dark"] .s-mb1-gray666, [data-theme="dark"] .s-mt025-gray666, [data-theme="dark"] .s-info-bar, [data-theme="dark"] .s-italic-note, [data-theme="dark"] .s-desc-sm, [data-theme="dark"] .reauth-modal-body { color: var(--util-gray-666); } [data-theme="dark"] .s-gray777, [data-theme="dark"] .s-text075-888, [data-theme="dark"] .s-text075-888-ml, [data-theme="dark"] .s-empty-pad1, [data-theme="dark"] .s-empty-pad2, [data-theme="dark"] .s-center-muted-sm, [data-theme="dark"] .s-center-muted-sm2, [data-theme="dark"] .s-empty-row, [data-theme="dark"] .s-empty-state, [data-theme="dark"] .s-empty-center, [data-theme="dark"] .s-th-cell, [data-theme="dark"] .s-th-cell-center, [data-theme="dark"] .s-section-label, [data-theme="dark"] .s-caps-888 { color: var(--util-gray-888); } [data-theme="dark"] .s-gray888 { color: var(--util-gray-888); } [data-theme="dark"] .s-grayaaa, [data-theme="dark"] .s-center-tiny-muted, [data-theme="dark"] .s-center-tiny-muted2, [data-theme="dark"] .s-icon-btn-tiny, [data-theme="dark"] .s-text08-aaa { color: var(--util-gray-aaa); } [data-theme="dark"] .s-mt25-sm-888 { color: var(--util-gray-888); } /* Warm brown tones */ [data-theme="dark"] .s-warm-clr, [data-theme="dark"] .s-warm-label, [data-theme="dark"] .s-warm-link-sm, [data-theme="dark"] .s-warm-link-xs, [data-theme="dark"] .s-warm-anchor, [data-theme="dark"] .s-warm-pointer, [data-theme="dark"] .s-warm-back, [data-theme="dark"] .s-warm-back2, [data-theme="dark"] .s-warm-bold, [data-theme="dark"] .s-warm-sm, [data-theme="dark"] .s-warm-link09, [data-theme="dark"] .link-warm, [data-theme="dark"] .auth-forgot-link, [data-theme="dark"] .s-hero-warm { color: var(--util-warm-brown); } [data-theme="dark"] .s-amber, [data-theme="dark"] .s-amber2, [data-theme="dark"] .s-amber3, [data-theme="dark"] .s-amber-label, [data-theme="dark"] .s-amber-title, [data-theme="dark"] .s-text08-amber2, [data-theme="dark"] .s-text08-amber2-pad, [data-theme="dark"] .s-text085-amber3, [data-theme="dark"] .s-brown-note, [data-theme="dark"] .s-brown-title09, [data-theme="dark"] .s-note-title, [data-theme="dark"] .s-card-warm-amber, [data-theme="dark"] .s-card-amber-sm, [data-theme="dark"] .s-text095-444 { color: var(--util-amber); } [data-theme="dark"] .s-brown, [data-theme="dark"] .s-browndarker { color: var(--util-warm-brown3); } [data-theme="dark"] .s-darkgreen, [data-theme="dark"] .s-green27, [data-theme="dark"] .s-green-label, [data-theme="dark"] .s-green-note, [data-theme="dark"] .s-medgreen-mt, [data-theme="dark"] .s-text08-darkgreen, [data-theme="dark"] .s-text08-darkgreen-pad, [data-theme="dark"] .s-text11-green, [data-theme="dark"] .s-teal-dark, [data-theme="dark"] .s-icon-btn-green, [data-theme="dark"] .s-green-link { color: var(--link-badge-dt-text); } /* Doc/prose overrides */ [data-theme="dark"] .dim-section p, [data-theme="dark"] .s-mv-444, [data-theme="dark"] .s-mv-444-09 { color: var(--util-gray-444); } [data-theme="dark"] .dim-growth-prompt, [data-theme="dark"] .s-prose-444, [data-theme="dark"] .s-prose-444-mv { color: var(--util-gray-444); } /* Card backgrounds */ [data-theme="dark"] .s-card-warm, [data-theme="dark"] .s-card-warm2, [data-theme="dark"] .s-card-subtle, [data-theme="dark"] .s-card-cream, [data-theme="dark"] .s-mb075-cream, [data-theme="dark"] .s-italic-note, [data-theme="dark"] .s-warm-radio-card { background: var(--bg-faf8f5); border-color: var(--warm-border-subtle); } [data-theme="dark"] .s-card-white, [data-theme="dark"] .s-card-selectable, [data-theme="dark"] .s-scroll-card, [data-theme="dark"] .s-modal-box-wide, [data-theme="dark"] .reauth-modal-box { background: var(--white); border-color: var(--border); } [data-theme="dark"] .s-card-amber, [data-theme="dark"] .s-card-warm-amber, [data-theme="dark"] .s-card-amber-sm, [data-theme="dark"] .s-note-orange, [data-theme="dark"] .s-card-orange, [data-theme="dark"] .s-card-sand { background: #2a2010; border-color: #6a4a20; } [data-theme="dark"] .s-card-green, [data-theme="dark"] .s-card-success { background: #172818; border-color: #3a6040; } [data-theme="dark"] .s-card-error { background: #2e1510; border-color: #6a2828; } [data-theme="dark"] .s-info-card-warm { background: #2a2018; border-color: #7a5830; } [data-theme="dark"] .s-sticky-footer-bar { background: var(--white); border-color: var(--util-warm-brown); } [data-theme="dark"] .s-full-input, [data-theme="dark"] .s-full-input2, [data-theme="dark"] .s-full-input3 { background: var(--color-input-bg); border-color: var(--color-input-border); color: var(--ink); } [data-theme="dark"] .s-hint-box { background: var(--hint-box-bg); color: var(--hint-box-text); } /* Dividers */ [data-theme="dark"] .s-hr-warm, [data-theme="dark"] .s-hr-warm-lg, [data-theme="dark"] .s-bb-warm, [data-theme="dark"] .s-section-divider-top, [data-theme="dark"] .s-section-top-sm { border-color: var(--divider-soft); } [data-theme="dark"] .s-border-top-soft { border-color: var(--warm-border-subtle-light); } /* Badge overrides */ [data-theme="dark"] .s-badge-amber-interactive, [data-theme="dark"] .s-badge-amber-static, [data-theme="dark"] .s-badge-amber-sm, [data-theme="dark"] .s-badge-pending { background: #2a2010; color: #d4a050; border-color: #806030; } [data-theme="dark"] .s-badge-orange-interactive, [data-theme="dark"] .s-tag-orange { background: #2d1e08; color: #e0904a; border-color: #8a5020; } [data-theme="dark"] .s-badge-green-interactive, [data-theme="dark"] .s-badge-green, [data-theme="dark"] .s-flag-badge-on, [data-theme="dark"] .s-badge-pass { background: #172818; color: #7ac880; border-color: #3a6848; } [data-theme="dark"] .s-badge-red, [data-theme="dark"] .s-badge-red-sm, [data-theme="dark"] .s-flag-badge-off { background: #2e1510; color: #e87060; border-color: #6a2828; } /* Mobile menu */ [data-theme="dark"] .mobile-menu-tos-note { background: var(--error-light); } /* s-warm-radio-card border */ [data-theme="dark"] .s-warm-radio-card { border-color: var(--warm); } /* Notif card placeholder */ [data-theme="dark"] .s-notif-card { background: var(--white); } /* ── Repeat dark-mode block for system preference ─────────────────────────── */ /* (CSS custom properties cascade means we need these overrides for each selector since :root:not([data-theme="light"]) inside @media doesn't target class-level) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-gray444, :root:not([data-theme="light"]) .s-prose-444, :root:not([data-theme="light"]) .s-prose-444-mv, :root:not([data-theme="light"]) .s-prose-444-mv2, :root:not([data-theme="light"]) .s-checkbox-row, :root:not([data-theme="light"]) .s-checkbox-row2 { color: var(--util-gray-444); } :root:not([data-theme="light"]) .s-gray555, :root:not([data-theme="light"]) .s-text085-555, :root:not([data-theme="light"]) .s-text085-555-lh, :root:not([data-theme="light"]) .s-text085-555-mb, :root:not([data-theme="light"]) .s-text09-555-mb1, :root:not([data-theme="light"]) .s-note-box { color: var(--util-gray-555); } :root:not([data-theme="light"]) .s-gray666, :root:not([data-theme="light"]) .s-text088-666, :root:not([data-theme="light"]) .s-desc-text, :root:not([data-theme="light"]) .s-italic-note, :root:not([data-theme="light"]) .s-desc-sm { color: var(--util-gray-666); } :root:not([data-theme="light"]) .s-gray777, :root:not([data-theme="light"]) .s-text075-888, :root:not([data-theme="light"]) .s-empty-row, :root:not([data-theme="light"]) .s-empty-state, :root:not([data-theme="light"]) .s-empty-center, :root:not([data-theme="light"]) .s-th-cell, :root:not([data-theme="light"]) .s-section-label, :root:not([data-theme="light"]) .s-caps-888 { color: var(--util-gray-888); } :root:not([data-theme="light"]) .s-gray888, :root:not([data-theme="light"]) .s-grayaaa, :root:not([data-theme="light"]) .s-center-tiny-muted { color: var(--util-gray-aaa); } :root:not([data-theme="light"]) .s-warm-clr, :root:not([data-theme="light"]) .s-warm-label, :root:not([data-theme="light"]) .s-warm-anchor, :root:not([data-theme="light"]) .s-warm-pointer, :root:not([data-theme="light"]) .link-warm, :root:not([data-theme="light"]) .auth-forgot-link { color: var(--util-warm-brown); } :root:not([data-theme="light"]) .s-card-warm, :root:not([data-theme="light"]) .s-card-warm2, :root:not([data-theme="light"]) .s-card-subtle, :root:not([data-theme="light"]) .s-card-cream { background: var(--bg-faf8f5); border-color: var(--warm-border-subtle); } :root:not([data-theme="light"]) .s-card-white, :root:not([data-theme="light"]) .s-card-selectable, :root:not([data-theme="light"]) .reauth-modal-box { background: var(--white); border-color: var(--border); } :root:not([data-theme="light"]) .s-card-amber, :root:not([data-theme="light"]) .s-card-warm-amber, :root:not([data-theme="light"]) .s-note-orange { background: #2a2010; border-color: #6a4a20; } :root:not([data-theme="light"]) .s-card-green, :root:not([data-theme="light"]) .s-card-success { background: #172818; border-color: #3a6040; } :root:not([data-theme="light"]) .s-full-input, :root:not([data-theme="light"]) .s-full-input2, :root:not([data-theme="light"]) .s-full-input3 { background: var(--color-input-bg); border-color: var(--color-input-border); color: var(--ink); } :root:not([data-theme="light"]) .s-hint-box { background: var(--hint-box-bg); color: var(--hint-box-text); } :root:not([data-theme="light"]) .s-hr-warm, :root:not([data-theme="light"]) .s-hr-warm-lg, :root:not([data-theme="light"]) .s-bb-warm { border-color: var(--divider-soft); } :root:not([data-theme="light"]) .s-badge-amber-interactive, :root:not([data-theme="light"]) .s-badge-amber-static { background: #2a2010; color: #d4a050; border-color: #806030; } :root:not([data-theme="light"]) .s-badge-green-interactive, :root:not([data-theme="light"]) .s-badge-green, :root:not([data-theme="light"]) .s-flag-badge-on { background: #172818; color: #7ac880; border-color: #3a6848; } :root:not([data-theme="light"]) .s-badge-red, :root:not([data-theme="light"]) .s-flag-badge-off { background: #2e1510; color: #e87060; border-color: #6a2828; } } /* ── Theme Selector UI (settings page) ───────────────────────────────────── */ .theme-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .theme-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: 999px; border: 1.5px solid var(--control-unselected-border, var(--border)); background: var(--control-bg, var(--paper)); color: var(--app-text-muted, var(--muted)); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'Space Grotesk', sans-serif; transition: border-color 0.15s, background 0.15s, color 0.15s; min-height: 44px; /* ADA: 44px touch target */ min-width: 44px; } .theme-btn:hover { border-color: var(--warm); color: var(--app-text, var(--ink)); } .theme-btn.active { border-color: var(--control-selected-border, var(--accent)); border-width: 2px; background: var(--control-selected-bg, var(--accent-light)); color: var(--control-selected-text, var(--accent)); box-shadow: inset 0 0 0 1px var(--control-selected-border, var(--accent)); } .theme-btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ── Drift / Consent Banner Classes (replaces inline style.cssText in app.js) */ .drift-banner-card { background: var(--drift-banner-bg); border: 1px solid var(--drift-banner-border); border-radius: 10px; padding: 0.875rem 1rem; margin: 0.75rem 0; font-size: 0.875rem; color: var(--drift-banner-text); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .consent-card-inline { background: var(--drift-banner-bg); border: 1px solid var(--drift-banner-border); border-radius: 10px; padding: 1rem 1.1rem; margin: 0.75rem; font-size: 0.875rem; color: var(--drift-banner-text); line-height: 1.55; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }