/* ========================================================================== COMPONENT LIBRARY - DARK MODE & HIGH CONTRAST ============================================================================ Theme styles for the component library. Uses data-theme attribute on for theme control. Usage: - Add data-theme="dark" to for dark theme - Add data-theme="high-contrast" to for high contrast - Add data-theme="dark-high-contrast" for both Toggle via JavaScript: document.documentElement.dataset.theme = 'dark'; document.documentElement.dataset.theme = 'high-contrast'; document.documentElement.dataset.theme = 'dark-high-contrast'; document.documentElement.dataset.theme = 'light'; // or removeAttribute ========================================================================== */ /* ========================================================================== DARK MODE (data-theme="dark" or data-theme="dark-high-contrast") ========================================================================== */ /* --- Base / Body --- */ [data-theme="dark"] body, [data-theme="dark-high-contrast"] body { background: var(--color-background); color: var(--color-text); } /* --- Text Colors --- */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .card-title, [data-theme="dark"] .product-title, [data-theme="dark"] .section-title-lg, [data-theme="dark"] .page-hero-title, [data-theme="dark"] .demo-title, [data-theme="dark"] .demo-header h1, [data-theme="dark"] .demo-section h2, [data-theme="dark"] .demo-subsection-title, [data-theme="dark-high-contrast"] h1, [data-theme="dark-high-contrast"] h2, [data-theme="dark-high-contrast"] h3, [data-theme="dark-high-contrast"] h4, [data-theme="dark-high-contrast"] h5, [data-theme="dark-high-contrast"] h6, [data-theme="dark-high-contrast"] .card-title, [data-theme="dark-high-contrast"] .product-title, [data-theme="dark-high-contrast"] .section-title-lg, [data-theme="dark-high-contrast"] .page-hero-title, [data-theme="dark-high-contrast"] .demo-title, [data-theme="dark-high-contrast"] .demo-header h1, [data-theme="dark-high-contrast"] .demo-section h2, [data-theme="dark-high-contrast"] .demo-subsection-title { color: var(--color-text); } [data-theme="dark"] .card-description, [data-theme="dark"] .card-meta, [data-theme="dark"] .section-subtitle-lg, [data-theme="dark"] .page-hero-subtitle, [data-theme="dark"] .status-note, [data-theme="dark"] .price-unit, [data-theme="dark"] .demo-description, [data-theme="dark"] .section-description, [data-theme="dark"] .demo-notes li, [data-theme="dark"] .demo-item-label, [data-theme="dark"] .demo-type-label, [data-theme="dark"] .demo-swatch-info, [data-theme="dark"] [class*="text-muted"], [data-theme="dark-high-contrast"] .card-description, [data-theme="dark-high-contrast"] .card-meta, [data-theme="dark-high-contrast"] .section-subtitle-lg, [data-theme="dark-high-contrast"] .page-hero-subtitle, [data-theme="dark-high-contrast"] .status-note, [data-theme="dark-high-contrast"] .price-unit, [data-theme="dark-high-contrast"] .demo-description, [data-theme="dark-high-contrast"] .section-description, [data-theme="dark-high-contrast"] .demo-notes li, [data-theme="dark-high-contrast"] .demo-item-label, [data-theme="dark-high-contrast"] .demo-type-label, [data-theme="dark-high-contrast"] .demo-swatch-info, [data-theme="dark-high-contrast"] [class*="text-muted"] { color: var(--color-text-muted); } [data-theme="dark"] .demo-notes li strong, [data-theme="dark-high-contrast"] .demo-notes li strong { color: var(--color-text); } /* --- Links --- */ [data-theme="dark"] a, [data-theme="dark"] .link-arrow, [data-theme="dark"] .card-link, [data-theme="dark"] .demo-back, [data-theme="dark-high-contrast"] a, [data-theme="dark-high-contrast"] .link-arrow, [data-theme="dark-high-contrast"] .card-link, [data-theme="dark-high-contrast"] .demo-back { color: var(--color-primary); } [data-theme="dark"] a:hover, [data-theme="dark"] .link-arrow:hover, [data-theme="dark-high-contrast"] a:hover, [data-theme="dark-high-contrast"] .link-arrow:hover { color: var(--color-secondary); } /* --- Cards --- */ [data-theme="dark"] .card, [data-theme="dark"] .option-card, [data-theme="dark-high-contrast"] .card, [data-theme="dark-high-contrast"] .option-card { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .product-card, [data-theme="dark-high-contrast"] .product-card { background: var(--gradient-card-base); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .card:hover, [data-theme="dark"] .product-card:hover, [data-theme="dark-high-contrast"] .card:hover, [data-theme="dark-high-contrast"] .product-card:hover { border-color: var(--color-primary-muted); box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary, 0 0 20px rgba(92, 67, 244, 0.2)); } [data-theme="dark"] .card.card-lift:hover, [data-theme="dark-high-contrast"] .card.card-lift:hover { background: var(--color-surface-elevated); } /* --- Product Card Enhancements (Dark) --- */ [data-theme="dark"] .product-bookmark, [data-theme="dark-high-contrast"] .product-bookmark { background: rgba(30, 30, 35, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .product-bookmark:hover, [data-theme="dark-high-contrast"] .product-bookmark:hover { background: rgba(40, 40, 45, 1); box-shadow: 0 4px 16px rgba(92, 67, 244, 0.3); } [data-theme="dark"] .product-bookmark .bookmark-icon, [data-theme="dark-high-contrast"] .product-bookmark .bookmark-icon { background-color: var(--color-text-muted); } [data-theme="dark"] .product-share, [data-theme="dark-high-contrast"] .product-share { background: rgba(30, 30, 35, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .product-share:hover, [data-theme="dark-high-contrast"] .product-share:hover { background: rgba(40, 40, 45, 1); box-shadow: 0 4px 16px rgba(92, 67, 244, 0.3); } [data-theme="dark"] .product-share .share-icon, [data-theme="dark-high-contrast"] .product-share .share-icon { background-color: var(--color-text-muted); } [data-theme="dark"] .product-quick-view, [data-theme="dark-high-contrast"] .product-quick-view { background: rgba(30, 30, 35, 0.95); border-color: rgba(255, 255, 255, 0.1); color: var(--color-text); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .product-quick-view:hover, [data-theme="dark-high-contrast"] .product-quick-view:hover { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-glow-primary); } [data-theme="dark"] .seller-badge, [data-theme="dark-high-contrast"] .seller-badge { background: rgba(30, 30, 35, 0.95); color: var(--color-text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .seller-badge:hover, [data-theme="dark-high-contrast"] .seller-badge:hover { background: var(--color-primary); color: var(--color-white); } [data-theme="dark"] .product-category-badge, [data-theme="dark-high-contrast"] .product-category-badge { background: var(--color-surface); } [data-theme="dark"] .product-card:hover .product-category-badge, [data-theme="dark-high-contrast"] .product-card:hover .product-category-badge { background: rgba(92, 67, 244, 0.2); } [data-theme="dark"] .product-options, [data-theme="dark-high-contrast"] .product-options { background: var(--gradient-footer-warm); border-top-color: var(--color-border); } /* --- Listing Card (Dark) --- */ [data-theme="dark"] .listing-card, [data-theme="dark-high-contrast"] .listing-card { background: var(--gradient-card-base); border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .listing-card:hover, [data-theme="dark-high-contrast"] .listing-card:hover { border-color: rgba(92, 67, 244, 0.3); box-shadow: 0 8px 24px rgba(92, 67, 244, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3); } /* Dark mode status tints */ [data-theme="dark"] .listing-card.draft, [data-theme="dark-high-contrast"] .listing-card.draft { background: linear-gradient(160deg, rgba(92, 67, 244, 0.04) 0%, var(--color-surface) 100%); } [data-theme="dark"] .listing-card.live, [data-theme="dark-high-contrast"] .listing-card.live { background: linear-gradient(160deg, rgba(34, 197, 94, 0.04) 0%, var(--color-surface) 100%); } [data-theme="dark"] .listing-card.partial, [data-theme="dark-high-contrast"] .listing-card.partial { background: linear-gradient(160deg, rgba(59, 130, 246, 0.04) 0%, var(--color-surface) 100%); } [data-theme="dark"] .listing-photo .photo-main, [data-theme="dark-high-contrast"] .listing-photo .photo-main { background: var(--color-surface-darkened); } [data-theme="dark"] .listing-metrics, [data-theme="dark-high-contrast"] .listing-metrics { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .metric-chip, [data-theme="dark-high-contrast"] .metric-chip { background: rgba(92, 67, 244, 0.08); color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .metric-chip.interactive:hover, [data-theme="dark-high-contrast"] .metric-chip.interactive:hover { background: rgba(92, 67, 244, 0.25); } [data-theme="dark"] .metric-chip.highlight, [data-theme="dark-high-contrast"] .metric-chip.highlight { background: rgba(92, 67, 244, 0.2); box-shadow: 0 0 0 1px rgba(92, 67, 244, 0.3); } [data-theme="dark"] .metric-chip.hot, [data-theme="dark-high-contrast"] .metric-chip.hot { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%); } [data-theme="dark"] .listing-footer, [data-theme="dark-high-contrast"] .listing-footer, [data-theme="dark"] .listing-card .card-footer, [data-theme="dark-high-contrast"] .listing-card .card-footer { background: linear-gradient(180deg, var(--color-surface-darkened) 0%, rgba(92, 67, 244, 0.06) 100%); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .listing-card .card-details, [data-theme="dark-high-contrast"] .listing-card .card-details { border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .listing-action, [data-theme="dark-high-contrast"] .listing-action { background: var(--color-surface); border-color: var(--color-border-medium); } /* Dark mode listing mode badges — uses tint tokens from vars.css dark theme */ [data-theme="dark"] .listing-mode-badge, [data-theme="dark-high-contrast"] .listing-mode-badge { background: var(--color-mode-forsale-tint); color: var(--color-mode-forsale-tint-text); } [data-theme="dark"] .listing-mode-badge.mode-showcase, [data-theme="dark-high-contrast"] .listing-mode-badge.mode-showcase, [data-theme="dark"] .listing-mode-badge.mode-showcase-\+-offers, [data-theme="dark-high-contrast"] .listing-mode-badge.mode-showcase-\+-offers { background: var(--color-mode-showcase-tint); color: var(--color-mode-showcase-tint-text); } [data-theme="dark"] .listing-mode-badge.mode-hidden, [data-theme="dark-high-contrast"] .listing-mode-badge.mode-hidden { background: var(--color-mode-hidden-tint); color: var(--color-mode-hidden-tint-text); } /* Dark mode listing status badges (Draft, Published, Partial) */ [data-theme="dark"] .listing-status-badge.draft, [data-theme="dark-high-contrast"] .listing-status-badge.draft { background: var(--color-badge-bg-primary); color: var(--color-badge-text-primary); } [data-theme="dark"] .listing-status-badge.published, [data-theme="dark-high-contrast"] .listing-status-badge.published { background: var(--color-badge-bg-success); color: var(--color-badge-text-success); } [data-theme="dark"] .listing-status-badge.partial, [data-theme="dark-high-contrast"] .listing-status-badge.partial { background: var(--color-badge-bg-info); color: var(--color-badge-text-info); } [data-theme="dark"] .listing-action:hover, [data-theme="dark-high-contrast"] .listing-action:hover { background: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-glow-primary-soft); } [data-theme="dark"] .listing-card[data-needs-action="true"], [data-theme="dark-high-contrast"] .listing-card[data-needs-action="true"] { background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--gradient-border-glow) border-box; } [data-theme="dark"] .listing-card[data-needs-action="true"]::after, [data-theme="dark-high-contrast"] .listing-card[data-needs-action="true"]::after { opacity: 0.4; } /* --- Buttons --- */ [data-theme="dark"] .command.btn-primary, [data-theme="dark-high-contrast"] .command.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-button); } [data-theme="dark"] .command.btn-primary:hover, [data-theme="dark-high-contrast"] .command.btn-primary:hover { box-shadow: var(--shadow-button-hover), var(--shadow-glow-primary); } [data-theme="dark"] .command.btn-secondary, [data-theme="dark-high-contrast"] .command.btn-secondary { background: var(--color-surface); border-color: var(--color-border-medium); color: var(--color-text); } [data-theme="dark"] .command.btn-secondary:hover, [data-theme="dark-high-contrast"] .command.btn-secondary:hover { background: var(--color-surface-elevated); border-color: var(--color-primary-muted); color: var(--color-primary); } [data-theme="dark"] .command.btn-ghost, [data-theme="dark-high-contrast"] .command.btn-ghost { color: var(--color-text-muted); } [data-theme="dark"] .command.btn-ghost:hover, [data-theme="dark-high-contrast"] .command.btn-ghost:hover { color: var(--color-text); } [data-theme="dark"] .command.btn-ghost:hover::before, [data-theme="dark-high-contrast"] .command.btn-ghost:hover::before { background: rgba(255, 255, 255, 0.08); } /* --- Surface Elements --- */ [data-theme="dark"] .sticky-status-bar, [data-theme="dark"] .chip, [data-theme="dark"] .badge, [data-theme="dark-high-contrast"] .sticky-status-bar, [data-theme="dark-high-contrast"] .chip, [data-theme="dark-high-contrast"] .badge { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .chip:hover, [data-theme="dark-high-contrast"] .chip:hover { background: var(--color-primary-hover-bg); border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .chip.selected, [data-theme="dark-high-contrast"] .chip.selected { background: var(--color-primary); color: var(--color-white); } /* --- Form Inputs --- */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .textbox input, [data-theme="dark"] .textbox textarea, [data-theme="dark"] .textbox select, [data-theme="dark-high-contrast"] input, [data-theme="dark-high-contrast"] textarea, [data-theme="dark-high-contrast"] select, [data-theme="dark-high-contrast"] .textbox input, [data-theme="dark-high-contrast"] .textbox textarea, [data-theme="dark-high-contrast"] .textbox select { background: var(--color-surface); border-color: var(--color-border-medium); color: var(--color-text); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus, [data-theme="dark-high-contrast"] input:focus, [data-theme="dark-high-contrast"] textarea:focus, [data-theme="dark-high-contrast"] select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark-high-contrast"] input::placeholder, [data-theme="dark-high-contrast"] textarea::placeholder { color: var(--color-text-muted); } /* --- Tooltips --- */ /* Target .tooltip .output (the actual visible tooltip element) */ [data-theme="dark"] .tooltip .output, [data-theme="dark-high-contrast"] .tooltip .output { background: var(--color-surface-elevated); color: var(--color-text); box-shadow: var(--shadow-dropdown); border: 1px solid var(--color-border-medium); } /* Arrow color must match tooltip background in dark mode */ [data-theme="dark"] .tooltip .output::after, [data-theme="dark-high-contrast"] .tooltip .output::after { border-top-color: var(--color-surface-elevated); } [data-theme="dark"] .tooltip .output.top::after, [data-theme="dark-high-contrast"] .tooltip .output.top::after { border-top-color: transparent; border-bottom-color: var(--color-surface-elevated); } /* --- Tips / Callouts --- */ [data-theme="dark"] .tip-info, [data-theme="dark"] .tip-important, [data-theme="dark"] .tip-success, [data-theme="dark"] .tip-error, [data-theme="dark"] .tip-neutral, [data-theme="dark-high-contrast"] .tip-info, [data-theme="dark-high-contrast"] .tip-important, [data-theme="dark-high-contrast"] .tip-success, [data-theme="dark-high-contrast"] .tip-error, [data-theme="dark-high-contrast"] .tip-neutral { background: var(--color-surface); color: var(--color-text); } [data-theme="dark"] .tip-info, [data-theme="dark-high-contrast"] .tip-info { background: var(--color-primary-lighter); border-color: var(--color-primary); } [data-theme="dark"] .tip-success, [data-theme="dark-high-contrast"] .tip-success { background: rgba(16, 185, 129, 0.1); border-color: var(--color-success); } [data-theme="dark"] .tip-important, [data-theme="dark-high-contrast"] .tip-important { background: rgba(245, 158, 11, 0.1); border-color: var(--color-warning); } [data-theme="dark"] .tip-error, [data-theme="dark-high-contrast"] .tip-error { background: rgba(239, 68, 68, 0.1); border-color: var(--color-error); } [data-theme="dark"] .tip-info strong, [data-theme="dark-high-contrast"] .tip-info strong { color: var(--color-primary); } [data-theme="dark"] .tip-important strong, [data-theme="dark-high-contrast"] .tip-important strong { color: var(--color-warning); } [data-theme="dark"] .tip-success strong, [data-theme="dark-high-contrast"] .tip-success strong { color: var(--color-success); } [data-theme="dark"] .tip-error strong, [data-theme="dark-high-contrast"] .tip-error strong { color: var(--color-error); } /* --- Page Hero --- */ [data-theme="dark"] .page-hero, [data-theme="dark-high-contrast"] .page-hero { background: var(--gradient-hero); } [data-theme="dark"] .page-hero::before, [data-theme="dark-high-contrast"] .page-hero::before { background: radial-gradient(ellipse at top right, rgba(0, 255, 203, 0.1) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(255, 255, 255, 0.02) 0%, transparent 50%); } /* --- Tables --- */ [data-theme="dark"] table, [data-theme="dark"] .demo-table, [data-theme="dark-high-contrast"] table, [data-theme="dark-high-contrast"] .demo-table { color: var(--color-text); } [data-theme="dark"] .demo-table th, [data-theme="dark-high-contrast"] .demo-table th { background: var(--color-surface-darkened); color: var(--color-text); } [data-theme="dark"] .demo-table td, [data-theme="dark-high-contrast"] .demo-table td { border-color: var(--color-border); } /* --- Code Blocks --- */ [data-theme="dark"] code, [data-theme="dark"] pre, [data-theme="dark-high-contrast"] code, [data-theme="dark-high-contrast"] pre { background: var(--color-surface-darkened); color: var(--color-text-light); border-color: var(--color-border); } [data-theme="dark"] .section-description code, [data-theme="dark"] .demo-notes li code, [data-theme="dark"] .demo-table td code, [data-theme="dark-high-contrast"] .section-description code, [data-theme="dark-high-contrast"] .demo-notes li code, [data-theme="dark-high-contrast"] .demo-table td code { background: var(--color-surface); color: var(--color-primary); } /* --- Next Steps --- */ [data-theme="dark"] .next-steps, [data-theme="dark-high-contrast"] .next-steps { background: var(--color-surface); } [data-theme="dark"] .next-steps .step-number, [data-theme="dark-high-contrast"] .next-steps .step-number { background: var(--color-primary); color: var(--color-white); } /* --- Scrollbar --- */ [data-theme="dark"] .scrollable::-webkit-scrollbar-thumb, [data-theme="dark-high-contrast"] .scrollable::-webkit-scrollbar-thumb { background-color: var(--color-secondary-muted); } [data-theme="dark"] .scrollable::-webkit-scrollbar-thumb:hover, [data-theme="dark-high-contrast"] .scrollable::-webkit-scrollbar-thumb:hover { background-color: var(--color-secondary); } /* --- Badges --- */ /* Status badge dot+pill — dark mode (matches variant-block-badge pattern) */ [data-theme="dark"] .sticky-status-bar .status-badge, [data-theme="dark-high-contrast"] .sticky-status-bar .status-badge { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .sticky-status-bar .status-badge::before, [data-theme="dark-high-contrast"] .sticky-status-bar .status-badge::before { background: rgba(255, 255, 255, 0.4); } /* Published → green dot+pill dark mode */ [data-theme="dark"] .sticky-status-bar[data-published="true"] .status-badge, [data-theme="dark-high-contrast"] .sticky-status-bar[data-published="true"] .status-badge { background: rgba(34, 197, 94, 0.15); color: #4ade80; } [data-theme="dark"] .sticky-status-bar[data-published="true"] .status-badge::before, [data-theme="dark-high-contrast"] .sticky-status-bar[data-published="true"] .status-badge::before { background: #4ade80; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); } /* Draft → violet dot+pill dark mode */ [data-theme="dark"] .sticky-status-bar[data-published="false"] .status-badge, [data-theme="dark-high-contrast"] .sticky-status-bar[data-published="false"] .status-badge { background: rgba(92, 67, 244, 0.15); color: rgba(168, 148, 255, 0.9); } [data-theme="dark"] .sticky-status-bar[data-published="false"] .status-badge::before, [data-theme="dark-high-contrast"] .sticky-status-bar[data-published="false"] .status-badge::before { background: rgba(168, 148, 255, 0.9); box-shadow: 0 0 0 2px rgba(92, 67, 244, 0.2); } /* Thread Context Variant (dark mode) - gradient stays the same, glass badges already adapt via standard .status-badge dark overrides */ [data-theme="dark"] .sticky-status-bar.thread-context, [data-theme="dark-high-contrast"] .sticky-status-bar.thread-context { /* Gradient background preserved - already works in dark mode */ background: var(--gradient-primary-brand); border-bottom: none; } [data-theme="dark"] .sticky-status-bar.thread-context .thread-title, [data-theme="dark-high-contrast"] .sticky-status-bar.thread-context .thread-title { color: var(--color-white); } /* Glass badges on dark gradient - increase contrast */ [data-theme="dark"] .sticky-status-bar.thread-context .status-badge, [data-theme="dark-high-contrast"] .sticky-status-bar.thread-context .status-badge { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.95); } [data-theme="dark"] .sticky-status-bar.thread-context .command-button-group.btn-primary, [data-theme="dark-high-contrast"] .sticky-status-bar.thread-context .command-button-group.btn-primary { background: rgba(255, 255, 255, 0.95); color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .sticky-status-bar.thread-context .command-button-group.btn-secondary, [data-theme="dark-high-contrast"] .sticky-status-bar.thread-context .command-button-group.btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .status-badge, [data-theme="dark-high-contrast"] .status-badge { color: var(--color-white); } [data-theme="dark"] .badge-primary, [data-theme="dark-high-contrast"] .badge-primary { background: var(--color-primary); color: var(--color-white); } [data-theme="dark"] .badge-primary-soft, [data-theme="dark-high-contrast"] .badge-primary-soft { background: var(--color-primary-light); color: var(--color-primary); } [data-theme="dark"] .badge-success, [data-theme="dark-high-contrast"] .badge-success { background: var(--color-success); color: var(--color-white); } [data-theme="dark"] .badge-warning, [data-theme="dark-high-contrast"] .badge-warning { background: var(--color-warning); color: var(--color-white); } [data-theme="dark"] .badge-error, [data-theme="dark-high-contrast"] .badge-error { background: var(--color-error); color: var(--color-white); } [data-theme="dark"] .badge-info, [data-theme="dark-high-contrast"] .badge-info { background: var(--color-info); color: var(--color-white); } [data-theme="dark"] .badge-muted, [data-theme="dark-high-contrast"] .badge-muted { background: var(--color-surface-darkened); color: var(--color-text-muted); } /* --- Status Badge (Dot+Pill) Dark Mode --- */ [data-theme="dark"] .status-badge, [data-theme="dark-high-contrast"] .status-badge { background: var(--color-surface); color: var(--color-text-muted); } [data-theme="dark"] .status-badge.status-pending, [data-theme="dark"] .status-badge.status-draft, [data-theme="dark-high-contrast"] .status-badge.status-pending, [data-theme="dark-high-contrast"] .status-badge.status-draft { background: var(--color-badge-bg-primary); color: var(--color-badge-text-primary); } [data-theme="dark"] .status-badge.status-complete, [data-theme="dark"] .status-badge.status-live, [data-theme="dark"] .status-badge.status-success, [data-theme="dark-high-contrast"] .status-badge.status-complete, [data-theme="dark-high-contrast"] .status-badge.status-live, [data-theme="dark-high-contrast"] .status-badge.status-success { background: var(--color-badge-bg-success); color: var(--color-badge-text-success); } [data-theme="dark"] .status-badge.status-cancelled, [data-theme="dark"] .status-badge.status-error, [data-theme="dark-high-contrast"] .status-badge.status-cancelled, [data-theme="dark-high-contrast"] .status-badge.status-error { background: var(--color-badge-bg-error); color: var(--color-badge-text-error); } [data-theme="dark"] .status-badge.status-warning, [data-theme="dark-high-contrast"] .status-badge.status-warning { background: var(--color-badge-bg-warning); color: var(--color-badge-text-warning); } [data-theme="dark"] .status-badge.status-info, [data-theme="dark"] .status-badge.status-partial, [data-theme="dark-high-contrast"] .status-badge.status-info, [data-theme="dark-high-contrast"] .status-badge.status-partial { background: var(--color-badge-bg-info); color: var(--color-badge-text-info); } [data-theme="dark"] .status-badge.role-selling, [data-theme="dark-high-contrast"] .status-badge.role-selling { background: var(--color-role-selling-tint); color: var(--color-role-selling-tint-text); } [data-theme="dark"] .status-badge.role-buying, [data-theme="dark-high-contrast"] .status-badge.role-buying { background: var(--color-role-buying-tint); color: var(--color-role-buying-tint-text); } [data-theme="dark"] .status-badge.status-muted, [data-theme="dark-high-contrast"] .status-badge.status-muted { background: var(--color-surface-darkened); color: var(--color-text-muted); } [data-theme="dark"] .status-badge.status-muted::before, [data-theme="dark-high-contrast"] .status-badge.status-muted::before { background: var(--color-text-muted); } /* --- State Surface Dark Mode --- */ [data-theme="dark"] .state-surface, [data-theme="dark-high-contrast"] .state-surface { border-color: var(--color-border); } [data-theme="dark"] .state-surface.state-success, [data-theme="dark-high-contrast"] .state-surface.state-success { background: rgba(var(--color-success-rgb), 0.1); border-color: rgba(var(--color-success-rgb), 0.2); } [data-theme="dark"] .state-surface.state-warning, [data-theme="dark-high-contrast"] .state-surface.state-warning { background: rgba(var(--color-warning-rgb), 0.1); border-color: rgba(var(--color-warning-rgb), 0.2); } [data-theme="dark"] .state-surface.state-error, [data-theme="dark-high-contrast"] .state-surface.state-error { background: rgba(var(--color-error-rgb), 0.1); border-color: rgba(var(--color-error-rgb), 0.2); } [data-theme="dark"] .state-surface.state-info, [data-theme="dark-high-contrast"] .state-surface.state-info { background: rgba(var(--color-info-rgb), 0.1); border-color: rgba(var(--color-info-rgb), 0.2); } [data-theme="dark"] .state-surface.state-primary, [data-theme="dark-high-contrast"] .state-surface.state-primary { background: rgba(var(--color-primary-rgb), 0.1); border-color: rgba(var(--color-primary-rgb), 0.2); } [data-theme="dark"] .state-surface.state-muted, [data-theme="dark-high-contrast"] .state-surface.state-muted { background: rgba(107, 114, 128, 0.1); border-color: rgba(107, 114, 128, 0.2); } /* State surface strong variant - dark mode */ [data-theme="dark"] .state-surface.state-surface-strong.state-success, [data-theme="dark-high-contrast"] .state-surface.state-surface-strong.state-success { background: rgba(var(--color-success-rgb), 0.18); border-color: rgba(var(--color-success-rgb), 0.35); } [data-theme="dark"] .state-surface.state-surface-strong.state-warning, [data-theme="dark-high-contrast"] .state-surface.state-surface-strong.state-warning { background: rgba(var(--color-warning-rgb), 0.18); border-color: rgba(var(--color-warning-rgb), 0.35); } [data-theme="dark"] .state-surface.state-surface-strong.state-error, [data-theme="dark-high-contrast"] .state-surface.state-surface-strong.state-error { background: rgba(var(--color-error-rgb), 0.18); border-color: rgba(var(--color-error-rgb), 0.35); } [data-theme="dark"] .state-surface.state-surface-strong.state-info, [data-theme="dark-high-contrast"] .state-surface.state-surface-strong.state-info { background: rgba(var(--color-info-rgb), 0.18); border-color: rgba(var(--color-info-rgb), 0.35); } [data-theme="dark"] .state-surface.state-surface-strong.state-primary, [data-theme="dark-high-contrast"] .state-surface.state-surface-strong.state-primary { background: rgba(var(--color-primary-rgb), 0.18); border-color: rgba(var(--color-primary-rgb), 0.35); } /* State surface icons - ensure visibility in dark mode */ [data-theme="dark"] .state-surface.state-success .state-icon, [data-theme="dark-high-contrast"] .state-surface.state-success .state-icon { color: var(--color-success-light, #86efac); } [data-theme="dark"] .state-surface.state-warning .state-icon, [data-theme="dark-high-contrast"] .state-surface.state-warning .state-icon { color: var(--color-warning-light, #fcd34d); } [data-theme="dark"] .state-surface.state-error .state-icon, [data-theme="dark-high-contrast"] .state-surface.state-error .state-icon { color: var(--color-error-light, #fca5a5); } [data-theme="dark"] .state-surface.state-info .state-icon, [data-theme="dark-high-contrast"] .state-surface.state-info .state-icon { color: var(--color-info-light, #93c5fd); } [data-theme="dark"] .state-surface.state-primary .state-icon, [data-theme="dark-high-contrast"] .state-surface.state-primary .state-icon { color: var(--color-primary-light, #a5b4fc); } /* --- Code Display Dark Mode --- */ [data-theme="dark"] .code-display, [data-theme="dark-high-contrast"] .code-display { background: var(--color-surface); color: var(--color-text); } [data-theme="dark"] .code-display.code-primary, [data-theme="dark-high-contrast"] .code-display.code-primary { background: rgba(var(--color-primary-rgb), 0.15); color: var(--color-primary-light-solid, rgb(167, 139, 250)); } [data-theme="dark"] .code-display.code-success, [data-theme="dark-high-contrast"] .code-display.code-success { background: rgba(var(--color-success-rgb), 0.15); color: var(--color-success-light, #86efac); } [data-theme="dark"] .code-display.code-large.code-primary, [data-theme="dark-high-contrast"] .code-display.code-large.code-primary, [data-theme="dark"] .code-display.code-xl.code-primary, [data-theme="dark-high-contrast"] .code-display.code-xl.code-primary { background: rgba(var(--color-primary-rgb), 0.18); } /* --- Expand Toggle Dark Mode --- */ [data-theme="dark"] .expand-toggle, [data-theme="dark-high-contrast"] .expand-toggle { background: var(--color-surface); color: var(--color-text-muted); } [data-theme="dark"] .expand-toggle:hover, [data-theme="dark-high-contrast"] .expand-toggle:hover { background: var(--color-surface-hover); } [data-theme="dark"] .expand-toggle.expand-toggle-primary, [data-theme="dark-high-contrast"] .expand-toggle.expand-toggle-primary { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary-light-solid, rgb(167, 139, 250)); } [data-theme="dark"] .expand-toggle.expand-toggle-primary:hover, [data-theme="dark-high-contrast"] .expand-toggle.expand-toggle-primary:hover { background: rgba(var(--color-primary-rgb), 0.15); } [data-theme="dark"] [ux-expanded] .expand-toggle, [data-theme="dark-high-contrast"] [ux-expanded] .expand-toggle { background: rgba(var(--color-primary-rgb), 0.12); } /* --- Demo Page Elements --- */ [data-theme="dark"] .demo-nav, [data-theme="dark-high-contrast"] .demo-nav { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .demo-preview, [data-theme="dark-high-contrast"] .demo-preview { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .demo-preview-surface, [data-theme="dark-high-contrast"] .demo-preview-surface { background: var(--color-background); } [data-theme="dark"] .demo-interactive, [data-theme="dark-high-contrast"] .demo-interactive { background: var(--color-background); border-color: var(--color-border-medium); } [data-theme="dark"] .demo-swatch-color, [data-theme="dark-high-contrast"] .demo-swatch-color { border-color: var(--color-border); } /* --- Theme Toggle (keep visible in dark mode) --- */ [data-theme="dark"] .theme-toggle-label, [data-theme="dark-high-contrast"] .theme-toggle-label { color: var(--color-text); } /* --- Image Card Overlay --- */ [data-theme="dark"] .image-card-overlay, [data-theme="dark-high-contrast"] .image-card-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%); } [data-theme="dark"] .image-card:hover .image-card-overlay, [data-theme="dark-high-contrast"] .image-card:hover .image-card-overlay { background: linear-gradient(to top, rgba(92, 67, 244, 0.95) 0%, transparent 100%); } /* --- Gradient Buttons --- */ [data-theme="dark"] .command.btn-gradient, [data-theme="dark-high-contrast"] .command.btn-gradient { box-shadow: var(--shadow-button), var(--shadow-glow-primary); } [data-theme="dark"] .command.btn-gradient:hover, [data-theme="dark-high-contrast"] .command.btn-gradient:hover { box-shadow: var(--shadow-button-hover), 0 0 30px rgba(92, 67, 244, 0.5); } /* --- Testimonial Cards --- */ [data-theme="dark"] .testimonial-card, [data-theme="dark-high-contrast"] .testimonial-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .testimonial-card:hover, [data-theme="dark-high-contrast"] .testimonial-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(92, 67, 244, 0.4); box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft); } [data-theme="dark"] .testimonial-card::before, [data-theme="dark-high-contrast"] .testimonial-card::before { color: rgba(92, 67, 244, 0.2); } [data-theme="dark"] .testimonial-card:hover::before, [data-theme="dark-high-contrast"] .testimonial-card:hover::before { color: rgba(92, 67, 244, 0.35); } [data-theme="dark"] .testimonial-role, [data-theme="dark-high-contrast"] .testimonial-role { color: var(--color-secondary); } [data-theme="dark"] .testimonial-card.testimonial-light, [data-theme="dark-high-contrast"] .testimonial-card.testimonial-light { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .testimonial-card.testimonial-light:hover, [data-theme="dark-high-contrast"] .testimonial-card.testimonial-light:hover { border-color: rgba(92, 67, 244, 0.3); } [data-theme="dark"] .testimonial-card.testimonial-light .testimonial-quote, [data-theme="dark-high-contrast"] .testimonial-card.testimonial-light .testimonial-quote { color: var(--color-text); } /* --- Workflow Steps --- */ [data-theme="dark"] .workflow-step-number, [data-theme="dark-high-contrast"] .workflow-step-number { background: var(--gradient-primary); color: var(--color-white); box-shadow: var(--shadow-button), var(--shadow-glow-primary); } [data-theme="dark"] .workflow-step:hover .workflow-step-number, [data-theme="dark-high-contrast"] .workflow-step:hover .workflow-step-number { box-shadow: var(--shadow-button-hover), var(--shadow-glow-combined); } [data-theme="dark"] .workflow-step-title, [data-theme="dark-high-contrast"] .workflow-step-title { color: var(--color-text); } [data-theme="dark"] .workflow-step:hover .workflow-step-title, [data-theme="dark-high-contrast"] .workflow-step:hover .workflow-step-title { color: var(--color-primary); } [data-theme="dark"] .workflow-step-description, [data-theme="dark-high-contrast"] .workflow-step-description { color: var(--color-text-muted); } [data-theme="dark"] .workflow-steps.workflow-connected .workflow-step::after, [data-theme="dark-high-contrast"] .workflow-steps.workflow-connected .workflow-step::after { background: linear-gradient(180deg, var(--color-primary-muted) 0%, var(--color-border) 100%); } /* --- FAQ Accordion --- */ [data-theme="dark"] .faq-item, [data-theme="dark-high-contrast"] .faq-item { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .faq-item:hover, [data-theme="dark-high-contrast"] .faq-item:hover { border-color: rgba(92, 67, 244, 0.2); box-shadow: var(--shadow-md); } [data-theme="dark"] .faq-item.open, [data-theme="dark-high-contrast"] .faq-item.open { border-color: var(--color-primary-muted); box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft); } [data-theme="dark"] .faq-question, [data-theme="dark-high-contrast"] .faq-question { color: var(--color-text); } [data-theme="dark"] .faq-item.open .faq-question, [data-theme="dark-high-contrast"] .faq-item.open .faq-question { color: var(--color-primary); } [data-theme="dark"] .faq-question:hover, [data-theme="dark-high-contrast"] .faq-question:hover { background: rgba(92, 67, 244, 0.05); } [data-theme="dark"] .faq-question::after, [data-theme="dark-high-contrast"] .faq-question::after { color: var(--color-primary); background: rgba(92, 67, 244, 0.15); } [data-theme="dark"] .faq-question:hover::after, [data-theme="dark-high-contrast"] .faq-question:hover::after { background: rgba(92, 67, 244, 0.25); } [data-theme="dark"] .faq-item.open .faq-question::after, [data-theme="dark-high-contrast"] .faq-item.open .faq-question::after { background: var(--color-primary); color: var(--color-white); } [data-theme="dark"] .faq-answer-content, [data-theme="dark-high-contrast"] .faq-answer-content { color: var(--color-text-muted); border-color: var(--color-border); } /* --- Stats Display --- */ [data-theme="dark"] .stat-number, [data-theme="dark-high-contrast"] .stat-number { color: var(--color-text); } [data-theme="dark"] .stat-label, [data-theme="dark-high-contrast"] .stat-label { color: var(--color-text-muted); } [data-theme="dark"] .stat-item.stat-primary .stat-number, [data-theme="dark-high-contrast"] .stat-item.stat-primary .stat-number { color: var(--color-primary); text-shadow: 0 0 50px rgba(92, 67, 244, 0.5); } [data-theme="dark"] .stat-item.stat-success .stat-number, [data-theme="dark-high-contrast"] .stat-item.stat-success .stat-number { text-shadow: 0 0 50px rgba(16, 185, 129, 0.5); } [data-theme="dark"] .stat-item.stat-warning .stat-number, [data-theme="dark-high-contrast"] .stat-item.stat-warning .stat-number { text-shadow: 0 0 50px rgba(245, 158, 11, 0.5); } [data-theme="dark"] .stat-item.stat-error .stat-number, [data-theme="dark-high-contrast"] .stat-item.stat-error .stat-number { text-shadow: 0 0 50px rgba(239, 68, 68, 0.5); } [data-theme="dark"] .stat-card, [data-theme="dark-high-contrast"] .stat-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .stat-card:hover, [data-theme="dark-high-contrast"] .stat-card:hover { border-color: rgba(92, 67, 244, 0.3); box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary); } /* --- Callout Boxes --- */ [data-theme="dark"] .callout, [data-theme="dark-high-contrast"] .callout { background: var(--color-surface); border-color: var(--color-primary); } [data-theme="dark"] .callout-title, [data-theme="dark-high-contrast"] .callout-title { color: var(--color-primary); } [data-theme="dark"] .callout-content, [data-theme="dark-high-contrast"] .callout-content { color: var(--color-text-muted); } [data-theme="dark"] .callout.callout-success, [data-theme="dark-high-contrast"] .callout.callout-success { border-color: var(--color-success); } [data-theme="dark"] .callout.callout-warning, [data-theme="dark-high-contrast"] .callout.callout-warning { background: var(--color-surface); border-color: var(--color-warning); } [data-theme="dark"] .callout.callout-info, [data-theme="dark-high-contrast"] .callout.callout-info { border-color: var(--color-info); } [data-theme="dark"] .blockquote, [data-theme="dark-high-contrast"] .blockquote { background: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); } [data-theme="dark"] .blockquote::before, [data-theme="dark-high-contrast"] .blockquote::before { color: var(--color-primary-muted); } [data-theme="dark"] .blockquote-citation, [data-theme="dark-high-contrast"] .blockquote-citation { color: var(--color-text-muted); } /* --- Profile Cards --- */ [data-theme="dark"] .profile-card, [data-theme="dark-high-contrast"] .profile-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .profile-card:hover, [data-theme="dark-high-contrast"] .profile-card:hover { border-color: rgba(92, 67, 244, 0.2); box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft); } [data-theme="dark"] .profile-photo img, [data-theme="dark-high-contrast"] .profile-photo img { border-color: var(--color-primary-muted); } [data-theme="dark"] .profile-card:hover .profile-photo img, [data-theme="dark-high-contrast"] .profile-card:hover .profile-photo img { border-color: var(--color-primary); box-shadow: var(--shadow-glow-primary-soft); } [data-theme="dark"] .profile-avatar-placeholder, [data-theme="dark-high-contrast"] .profile-avatar-placeholder { background: var(--gradient-primary-brand); box-shadow: var(--shadow-button), var(--shadow-glow-primary-soft); } [data-theme="dark"] .profile-card:hover .profile-avatar-placeholder, [data-theme="dark-high-contrast"] .profile-card:hover .profile-avatar-placeholder { box-shadow: var(--shadow-button-hover), var(--shadow-glow-combined); } [data-theme="dark"] .profile-name, [data-theme="dark-high-contrast"] .profile-name { color: var(--color-text); } [data-theme="dark"] .profile-title, [data-theme="dark-high-contrast"] .profile-title { color: var(--color-primary); } [data-theme="dark"] .profile-location, [data-theme="dark-high-contrast"] .profile-location { color: var(--color-text-muted); } [data-theme="dark"] .profile-location::before, [data-theme="dark-high-contrast"] .profile-location::before { background: var(--color-secondary); } [data-theme="dark"] .profile-bio, [data-theme="dark-high-contrast"] .profile-bio { color: var(--color-text-muted); } /* --- Comparison Cards --- */ [data-theme="dark"] .comparison-card, [data-theme="dark-high-contrast"] .comparison-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .comparison-card:hover, [data-theme="dark-high-contrast"] .comparison-card:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] .comparison-card.comparison-negative, [data-theme="dark-high-contrast"] .comparison-card.comparison-negative { border-color: var(--color-error); } [data-theme="dark"] .comparison-card.comparison-negative::before, [data-theme="dark-high-contrast"] .comparison-card.comparison-negative::before { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, transparent 60%); } [data-theme="dark"] .comparison-card.comparison-negative:hover, [data-theme="dark-high-contrast"] .comparison-card.comparison-negative:hover { box-shadow: var(--shadow-md), 0 0 30px rgba(239, 68, 68, 0.15); } [data-theme="dark"] .comparison-card.comparison-positive, [data-theme="dark-high-contrast"] .comparison-card.comparison-positive { border-color: var(--color-primary); } [data-theme="dark"] .comparison-card.comparison-positive::before, [data-theme="dark-high-contrast"] .comparison-card.comparison-positive::before { background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(0, 255, 203, 0.04) 100%); } [data-theme="dark"] .comparison-card.comparison-positive:hover, [data-theme="dark-high-contrast"] .comparison-card.comparison-positive:hover { box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary); } [data-theme="dark"] .comparison-card.comparison-highlight, [data-theme="dark-high-contrast"] .comparison-card.comparison-highlight { box-shadow: var(--shadow-card-lifted), var(--shadow-glow-combined); } [data-theme="dark"] .comparison-card.comparison-highlight:hover, [data-theme="dark-high-contrast"] .comparison-card.comparison-highlight:hover { box-shadow: var(--shadow-card-lifted), 0 0 40px rgba(92, 67, 244, 0.4), 0 0 60px rgba(0, 255, 203, 0.2); } [data-theme="dark"] .comparison-card-title, [data-theme="dark-high-contrast"] .comparison-card-title { color: var(--color-text); } [data-theme="dark"] .comparison-list li, [data-theme="dark-high-contrast"] .comparison-list li { color: var(--color-text-muted); } [data-theme="dark"] .comparison-card:hover .comparison-list li, [data-theme="dark-high-contrast"] .comparison-card:hover .comparison-list li { color: var(--color-text-light); } [data-theme="dark"] .comparison-negative .comparison-list li::before, [data-theme="dark-high-contrast"] .comparison-negative .comparison-list li::before { color: var(--color-error); } [data-theme="dark"] .comparison-positive .comparison-list li::before, [data-theme="dark-high-contrast"] .comparison-positive .comparison-list li::before { color: var(--color-primary); } [data-theme="dark"] .comparison-negative .comparison-label, [data-theme="dark-high-contrast"] .comparison-negative .comparison-label { background: rgba(239, 68, 68, 0.2); color: var(--color-error); } [data-theme="dark"] .comparison-positive .comparison-label, [data-theme="dark-high-contrast"] .comparison-positive .comparison-label { background: rgba(92, 67, 244, 0.2); color: var(--color-primary); } /* --- Neutral comparison card --- */ [data-theme="dark"] .comparison-card:not(.comparison-negative):not(.comparison-positive), [data-theme="dark-high-contrast"] .comparison-card:not(.comparison-negative):not(.comparison-positive) { border-color: var(--color-border-medium); } /* --- Fee Comparison --- */ [data-theme="dark"] .fee-comparison-item, [data-theme="dark-high-contrast"] .fee-comparison-item { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .fee-comparison-item.fee-comparison-highlight, [data-theme="dark-high-contrast"] .fee-comparison-item.fee-comparison-highlight { border-color: rgba(92, 67, 244, 0.3); background: linear-gradient(160deg, rgba(92, 67, 244, 0.08) 0%, rgba(0, 255, 203, 0.03) 50%, var(--color-surface) 100%); box-shadow: 0 4px 16px rgba(92, 67, 244, 0.15), 0 1px 4px rgba(92, 67, 244, 0.1); } [data-theme="dark"] .fee-comparison-platform, [data-theme="dark-high-contrast"] .fee-comparison-platform { color: var(--color-text); } [data-theme="dark"] .fee-item, [data-theme="dark-high-contrast"] .fee-item { color: var(--color-text-muted); border-bottom-color: var(--color-border); } [data-theme="dark"] .fee-item.fee-negative, [data-theme="dark-high-contrast"] .fee-item.fee-negative { color: var(--color-error-light-solid); } [data-theme="dark"] .fee-item.fee-positive, [data-theme="dark-high-contrast"] .fee-item.fee-positive { color: #4ade80; } [data-theme="dark"] .fee-total, [data-theme="dark-high-contrast"] .fee-total { color: var(--color-text); } [data-theme="dark"] .fee-comparison-note, [data-theme="dark-high-contrast"] .fee-comparison-note { color: var(--color-text-muted); } [data-theme="dark"] .fee-comparison-note strong, [data-theme="dark-high-contrast"] .fee-comparison-note strong { color: var(--color-primary-light-solid); } /* ========================================================================== HIGH CONTRAST MODE (data-theme="high-contrast" or "dark-high-contrast") ========================================================================== */ /* --- Solid borders instead of subtle ones --- */ [data-theme="high-contrast"] .card, [data-theme="high-contrast"] .product-card, [data-theme="high-contrast"] .option-card, [data-theme="high-contrast"] .chip, [data-theme="high-contrast"] .badge, [data-theme="high-contrast"] .demo-preview, [data-theme="dark-high-contrast"] .card, [data-theme="dark-high-contrast"] .product-card, [data-theme="dark-high-contrast"] .option-card, [data-theme="dark-high-contrast"] .chip, [data-theme="dark-high-contrast"] .badge, [data-theme="dark-high-contrast"] .demo-preview { border: 2px solid currentColor; box-shadow: none; } /* --- Ghost buttons get visible border --- */ [data-theme="high-contrast"] .command.btn-ghost, [data-theme="dark-high-contrast"] .command.btn-ghost { border: 1px solid currentColor; } /* --- Remove gradients --- */ [data-theme="high-contrast"] .command.btn-gradient, [data-theme="high-contrast"] .page-hero, [data-theme="dark-high-contrast"] .command.btn-gradient { background: var(--color-primary); } [data-theme="high-contrast"] .card-reveal-gradient::before, [data-theme="dark-high-contrast"] .card-reveal-gradient::before { display: none; } /* --- Enhanced focus rings --- */ [data-theme="high-contrast"] .command:focus, [data-theme="high-contrast"] .chip:focus, [data-theme="high-contrast"] [tabindex]:focus, [data-theme="high-contrast"] a:focus, [data-theme="dark-high-contrast"] .command:focus, [data-theme="dark-high-contrast"] .chip:focus, [data-theme="dark-high-contrast"] [tabindex]:focus, [data-theme="dark-high-contrast"] a:focus { outline: 3px solid currentColor; outline-offset: 2px; } /* --- Remove box shadows, add borders --- */ [data-theme="high-contrast"] .sticky-status-bar, [data-theme="high-contrast"] .seller-badge, [data-theme="high-contrast"] .tooltip .output, [data-theme="dark-high-contrast"] .sticky-status-bar, [data-theme="dark-high-contrast"] .seller-badge, [data-theme="dark-high-contrast"] .tooltip .output { box-shadow: none; border: 2px solid currentColor; } /* --- Ensure sufficient contrast on badges --- */ [data-theme="high-contrast"] .badge { background: var(--color-text); color: var(--color-background); } /* --- Use underlines for emphasis on links --- */ [data-theme="high-contrast"] .link-arrow, [data-theme="high-contrast"] .card-link, [data-theme="high-contrast"] a, [data-theme="dark-high-contrast"] .link-arrow, [data-theme="dark-high-contrast"] .card-link, [data-theme="dark-high-contrast"] a { text-decoration: underline; } /* --- Tips get stronger borders --- */ [data-theme="high-contrast"] .tip-info, [data-theme="high-contrast"] .tip-important, [data-theme="high-contrast"] .tip-success, [data-theme="high-contrast"] .tip-error, [data-theme="high-contrast"] .tip-neutral, [data-theme="dark-high-contrast"] .tip-info, [data-theme="dark-high-contrast"] .tip-important, [data-theme="dark-high-contrast"] .tip-success, [data-theme="dark-high-contrast"] .tip-error, [data-theme="dark-high-contrast"] .tip-neutral { border-width: 4px; } /* --- Form inputs --- */ [data-theme="high-contrast"] input, [data-theme="high-contrast"] textarea, [data-theme="high-contrast"] select, [data-theme="dark-high-contrast"] input, [data-theme="dark-high-contrast"] textarea, [data-theme="dark-high-contrast"] select { border: 2px solid currentColor; } /* --- Tables --- */ [data-theme="high-contrast"] .demo-table th, [data-theme="high-contrast"] .demo-table td, [data-theme="dark-high-contrast"] .demo-table th, [data-theme="dark-high-contrast"] .demo-table td { border: 1px solid currentColor; } /* ========================================================================== DARK + HIGH CONTRAST SPECIFIC OVERRIDES ========================================================================== */ [data-theme="dark-high-contrast"] .badge { background: var(--color-text-dark, #ffffff); color: var(--color-background-dark, #1a1a2e); } [data-theme="dark-high-contrast"] .card, [data-theme="dark-high-contrast"] .product-card, [data-theme="dark-high-contrast"] .demo-preview { border-color: var(--color-text-dark, #ffffff); } /* Remove hover shadow in high contrast (already handled above, but ensure it's gone) */ [data-theme="dark-high-contrast"] .card:hover, [data-theme="dark-high-contrast"] .product-card:hover { box-shadow: none; } /* ========================================================================== NEW COMPONENT DARK MODE STYLES (SECTION 37-43) ========================================================================== */ /* --- Hero Section (Section 37) --- */ [data-theme="dark"] .hero-overlay, [data-theme="dark-high-contrast"] .hero-overlay { background: linear-gradient(135deg, rgba(0, 0,0, 0.9) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.5) 100%); } [data-theme="dark"] .hero-content, [data-theme="dark-high-contrast"] .hero-content { color:var(--color-white); } [data-theme="dark"] .hero-content .command.btn-cta-secondary, [data-theme="dark"] .hero-content .command.btn-cta-secondary { color:var(--color-white); } /* --- Path/Journey Cards (Section 38) --- */ [data-theme="dark"] .path-card, [data-theme="dark-high-contrast"] .path-card { background: var(--color-surface-dark, #252538); border-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .path-card:hover, [data-theme="dark-high-contrast"] .path-card:hover { border-color: rgba(92, 67, 244, 0.4); box-shadow: var(--shadow-card-hover), 0 0 30px rgba(92, 67, 244, 0.2); } [data-theme="dark"] .path-card-title, [data-theme="dark-high-contrast"] .path-card-title { color: var(--color-text-dark, #f0f0f5); } [data-theme="dark"] .path-card-description, [data-theme="dark"] .path-benefits li, [data-theme="dark-high-contrast"] .path-card-description, [data-theme="dark-high-contrast"] .path-benefits li { color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } [data-theme="dark"] .path-icon, [data-theme="dark-high-contrast"] .path-icon { border-color: rgba(92, 67, 244, 0.4); } /* --- Collection Cards (Section 39) --- */ [data-theme="dark"] .collection-card, [data-theme="dark-high-contrast"] .collection-card { background: var(--color-surface-dark, #252538); border-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .collection-card:hover, [data-theme="dark-high-contrast"] .collection-card:hover { border-color: rgba(92, 67, 244, 0.4); } [data-theme="dark"] .collector-name, [data-theme="dark-high-contrast"] .collector-name { color: var(--color-text-dark, #f0f0f5); } [data-theme="dark"] .collector-handle, [data-theme="dark"] .collection-description, [data-theme="dark-high-contrast"] .collector-handle, [data-theme="dark-high-contrast"] .collection-description { color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } /* --- Feature Cards (Section 40) --- */ [data-theme="dark"] .feature-card, [data-theme="dark-high-contrast"] .feature-card { background: var(--color-surface-dark, #252538); border-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .feature-card.featured, [data-theme="dark-high-contrast"] .feature-card.featured { border-color: rgba(92, 67, 244, 0.3); } [data-theme="dark"] .feature-title, [data-theme="dark-high-contrast"] .feature-title { color: var(--color-text-dark, #f0f0f5); } [data-theme="dark"] .feature-description, [data-theme="dark"] .feature-benefit, [data-theme="dark-high-contrast"] .feature-description, [data-theme="dark-high-contrast"] .feature-benefit { color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } [data-theme="dark"] .feature-stat, [data-theme="dark-high-contrast"] .feature-stat { background: var(--color-background-dark, #1a1a2e); color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } /* --- Value Proposition Cards (Section 41) --- */ [data-theme="dark"] .value-prop, [data-theme="dark-high-contrast"] .value-prop { background: var(--color-surface-dark, #252538); border-color: transparent; } [data-theme="dark"] .value-prop:hover, [data-theme="dark-high-contrast"] .value-prop:hover { border-color: rgba(92, 67, 244, 0.3); } [data-theme="dark"] .value-prop-title, [data-theme="dark-high-contrast"] .value-prop-title { color: var(--color-text-dark, #f0f0f5); } [data-theme="dark"] .value-prop-description, [data-theme="dark-high-contrast"] .value-prop-description { color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } /* --- CTA Sections & Callouts (Section 42) --- */ [data-theme="dark"] .callout-primary, [data-theme="dark-high-contrast"] .callout-primary { background: rgba(92, 67, 244, 0.15); border-color: rgba(92, 67, 244, 0.4); } [data-theme="dark"] .callout-success, [data-theme="dark-high-contrast"] .callout-success { background: rgba(0, 255, 203, 0.1); border-color: rgba(0, 255, 203, 0.4); } [data-theme="dark"] .callout-warning, [data-theme="dark-high-contrast"] .callout-warning { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); } [data-theme="dark"] .callout-info, [data-theme="dark-high-contrast"] .callout-info { background: var(--color-surface-dark, #252538); border-color: var(--color-border-dark, rgba(255, 255, 255, 0.15)); } [data-theme="dark"] .callout-title, [data-theme="dark-high-contrast"] .callout-title { color: var(--color-text-dark, #f0f0f5); } [data-theme="dark"] .callout-text, [data-theme="dark-high-contrast"] .callout-text { color: var(--color-text-muted-dark, rgba(255, 255, 255, 0.7)); } /* --- Sticky Status Bar --- */ [data-theme="dark"] .sticky-status-bar, [data-theme="dark-high-contrast"] .sticky-status-bar { background: var(--color-surface); border-bottom-color: var(--color-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .sticky-status-bar .command-button-group.btn-secondary, [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-secondary { border-color: transparent; color: rgba(255, 255, 255, 0.5); background: transparent; } [data-theme="dark"] .sticky-status-bar .command-button-group.btn-secondary:hover, [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-secondary:hover { background: transparent; color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .sticky-status-bar .pending-changes-indicator, [data-theme="dark-high-contrast"] .sticky-status-bar .pending-changes-indicator { background: var(--color-warning-light); color: var(--color-warning); } [data-theme="dark"] .sticky-status-bar .changes-badge, [data-theme="dark-high-contrast"] .sticky-status-bar .changes-badge { box-shadow: var(--shadow-md); } [data-theme="dark"] #Body.scrolled .sticky-status-bar, [data-theme="dark-high-contrast"] #Body.scrolled .sticky-status-bar { background: var(--color-surface); border-bottom-color: var(--color-border-medium); box-shadow: var(--shadow-md); } /* --- Sticky Family Photo --- */ [data-theme="dark"] .sticky-status-bar .sticky-family-photo, [data-theme="dark-high-contrast"] .sticky-status-bar .sticky-family-photo { background: var(--color-surface-elevated); border-color: var(--color-border-medium); } /* --- Split Button Group --- */ [data-theme="dark"] .split-button-group, [data-theme="dark-high-contrast"] .split-button-group { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .split-button-group .split-menu-trigger, [data-theme="dark"] .split-button-group .split-primary-action, [data-theme="dark-high-contrast"] .split-button-group .split-menu-trigger, [data-theme="dark-high-contrast"] .split-button-group .split-primary-action { background: var(--color-primary); } [data-theme="dark"] .split-button-group .split-menu-trigger:hover, [data-theme="dark"] .split-button-group .split-primary-action:hover, [data-theme="dark-high-contrast"] .split-button-group .split-menu-trigger:hover, [data-theme="dark-high-contrast"] .split-button-group .split-primary-action:hover { background: var(--color-primary-dark); } /* Split button divider - more visible in dark mode */ [data-theme="dark"] .split-button-group .split-menu-trigger::after, [data-theme="dark-high-contrast"] .split-button-group .split-menu-trigger::after { background: rgba(255, 255, 255, 0.3); } /* Split button published state in dark mode */ [data-theme="dark"] .split-button-group[data-state="published"] .split-menu-trigger, [data-theme="dark"] .split-button-group[data-state="published"] .split-primary-action, [data-theme="dark-high-contrast"] .split-button-group[data-state="published"] .split-menu-trigger, [data-theme="dark-high-contrast"] .split-button-group[data-state="published"] .split-primary-action { background: var(--color-success, #22c55e); } [data-theme="dark"] .split-button-group[data-state="published"] .split-menu-trigger:hover, [data-theme="dark"] .split-button-group[data-state="published"] .split-primary-action:hover, [data-theme="dark-high-contrast"] .split-button-group[data-state="published"] .split-menu-trigger:hover, [data-theme="dark-high-contrast"] .split-button-group[data-state="published"] .split-primary-action:hover { background: var(--color-success-dark, #16a34a); } /* Split button changes badge in dark mode */ [data-theme="dark"] .split-button-group .changes-badge, [data-theme="dark-high-contrast"] .split-button-group .changes-badge { background: var(--color-secondary); color: var(--color-text); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* "Up to Date" state - subdued split button */ [data-theme="dark"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-trigger, [data-theme="dark"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-primary-action, [data-theme="dark-high-contrast"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-trigger, [data-theme="dark-high-contrast"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-primary-action { background: var(--color-surface); border-color: rgba(92, 67, 244, 0.5); color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-trigger::after, [data-theme="dark-high-contrast"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-trigger::after { background: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-icon, [data-theme="dark-high-contrast"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .split-button-group .split-menu-icon { opacity: 0.4; } /* --- App Header --- */ [data-theme="dark"] .app-header, [data-theme="dark-high-contrast"] .app-header { border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .app-header-primary, [data-theme="dark-high-contrast"] .app-header-primary { box-shadow: none; border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .app-header-search input, [data-theme="dark-high-contrast"] .app-header-search input { background: var(--color-surface); border-color: var(--color-border-medium); } [data-theme="dark"] .app-header-search-clear, [data-theme="dark-high-contrast"] .app-header-search-clear { background-color: var(--color-surface-elevated); background-image: url("/images/icon/close-white.svg"); } [data-theme="dark"] .app-header-search-clear:hover, [data-theme="dark-high-contrast"] .app-header-search-clear:hover { background-color: var(--color-border-medium); } [data-theme="dark"] .app-header-action:hover, [data-theme="dark-high-contrast"] .app-header-action:hover { background: var(--color-surface-elevated); } [data-theme="dark"] .app-header-menu:hover, [data-theme="dark-high-contrast"] .app-header-menu:hover { background: var(--color-surface-elevated); } /* --- §45B Search Empty States --- */ [data-theme="dark"] .search-empty-state, [data-theme="dark-high-contrast"] .search-empty-state { box-shadow: var(--shadow-lg); } [data-theme="dark"] .search-empty-state .hero-illustration img, [data-theme="dark-high-contrast"] .search-empty-state .hero-illustration img { filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4)); } [data-theme="dark"] .search-empty-state .action-buttons .command, [data-theme="dark-high-contrast"] .search-empty-state .action-buttons .command { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border-medium); } [data-theme="dark"] .search-empty-state .action-buttons .command:hover, [data-theme="dark-high-contrast"] .search-empty-state .action-buttons .command:hover { background-color: var(--color-primary-hover-bg); border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .search-empty-state .feature-icon, [data-theme="dark"] .search-empty-state .suggestion-icon, [data-theme="dark-high-contrast"] .search-empty-state .feature-icon, [data-theme="dark-high-contrast"] .search-empty-state .suggestion-icon { background-color: var(--color-secondary-dark); } [data-theme="dark"] .search-empty-state .filter-tag, [data-theme="dark-high-contrast"] .search-empty-state .filter-tag { background: var(--color-surface); border-color: var(--color-primary-muted); } [data-theme="dark"] .search-empty-state .filter-remove, [data-theme="dark-high-contrast"] .search-empty-state .filter-remove { background: var(--color-error); color: var(--color-white); } [data-theme="dark"] .search-empty-state .trending-link, [data-theme="dark"] .search-empty-state .related-link, [data-theme="dark-high-contrast"] .search-empty-state .trending-link, [data-theme="dark-high-contrast"] .search-empty-state .related-link { background: var(--color-surface); color: var(--color-primary-light, var(--color-primary)); border-color: var(--color-primary-muted); } [data-theme="dark"] .search-empty-state .trending-link:hover, [data-theme="dark"] .search-empty-state .related-link:hover, [data-theme="dark-high-contrast"] .search-empty-state .trending-link:hover, [data-theme="dark-high-contrast"] .search-empty-state .related-link:hover { background: var(--color-primary-hover-bg); border-color: var(--color-primary); color: var(--color-primary); } /* --- CTA Button Variants (Section 43) --- */ [data-theme="dark"] .command.btn-cta-outline, [data-theme="dark-high-contrast"] .command.btn-cta-outline { border-color: var(--color-primary-light, rgba(92, 67, 244, 0.6)); color: var(--color-primary-light, rgb(140, 120, 255)); } [data-theme="dark"] .command.btn-cta-outline:hover, [data-theme="dark-high-contrast"] .command.btn-cta-outline:hover { background: var(--color-primary); color: var(--color-background); border-color: var(--color-primary); } /* --- Autocomplete (Section 46) --- */ [data-theme="dark"] .autocomplete-container, [data-theme="dark-high-contrast"] .autocomplete-container { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-dropdown); } [data-theme="dark"] .autocomplete-choices .autocomplete-item, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item { background-color: var(--color-surface); color: var(--color-text); } [data-theme="dark"] .autocomplete-choices .autocomplete-item:hover, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item:hover { background-color: var(--color-surface-elevated); } [data-theme="dark"] .autocomplete-choices .autocomplete-item b, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item b { color: var(--color-secondary); } [data-theme="dark"] .autocomplete-choices .autocomplete-item .autocomplete-path, [data-theme="dark"] .autocomplete-choices .autocomplete-item .autocomplete-matches, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item .autocomplete-path, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item .autocomplete-matches { color: var(--color-text-muted); } [data-theme="dark"] .autocomplete-choices .autocomplete-item.active, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item.active { background-color: var(--color-primary); color: var(--color-primary-on-dark); } [data-theme="dark"] .autocomplete-choices .autocomplete-item.active b, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item.active b { color: var(--color-primary-on-dark); } [data-theme="dark"] .autocomplete-choices .autocomplete-item.selected, [data-theme="dark-high-contrast"] .autocomplete-choices .autocomplete-item.selected { background-color: var(--color-primary); color: var(--color-primary-on-dark); } /* Multi-select checkboxes in dark mode */ [data-theme="dark"] .autocomplete-choices[selectable-multiple] .autocomplete-item::before, [data-theme="dark-high-contrast"] .autocomplete-choices[selectable-multiple] .autocomplete-item::before { background: var(--color-surface-elevated); border-color: var(--color-border-medium); } /* Scrollbar dark mode */ [data-theme="dark"] .autocomplete-choices::-webkit-scrollbar-track, [data-theme="dark-high-contrast"] .autocomplete-choices::-webkit-scrollbar-track { background: var(--color-surface); } [data-theme="dark"] .autocomplete-choices::-webkit-scrollbar-thumb, [data-theme="dark-high-contrast"] .autocomplete-choices::-webkit-scrollbar-thumb { background: var(--color-border-medium); } [data-theme="dark"] .autocomplete-choices::-webkit-scrollbar-thumb:hover, [data-theme="dark-high-contrast"] .autocomplete-choices::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Mobile full-screen modal dark mode */ [data-theme="dark"] .autocomplete-fullscreen .autocomplete-header, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-header { background: var(--color-surface-elevated); border-color: var(--color-border); } [data-theme="dark"] .autocomplete-fullscreen .autocomplete-header input, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-header input { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-medium); } [data-theme="dark"] .autocomplete-fullscreen .autocomplete-header input:focus, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-header input:focus { border-color: var(--color-primary); } [data-theme="dark"] .autocomplete-fullscreen .autocomplete-close, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-close { background-color: var(--color-surface); background-image: url("/images/icon/close-white.svg"); } [data-theme="dark"] .autocomplete-fullscreen .autocomplete-close:hover, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-close:hover { background-color: var(--color-border-medium); } /* Mobile suggestion border in dark mode */ [data-theme="dark"] .autocomplete-fullscreen .autocomplete-choices .autocomplete-item, [data-theme="dark-high-contrast"] .autocomplete-fullscreen .autocomplete-choices .autocomplete-item { border-bottom-color: var(--color-border); } /* ========================================================================== SECTION 47: SMART FILTER TABS — Dark Mode ========================================================================== */ [data-theme="dark"] .search-filter-interface, [data-theme="dark-high-contrast"] .search-filter-interface { background: linear-gradient(180deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.03) 100%); border-bottom-color: rgba(92, 67, 244, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } [data-theme="dark"] .search-filter-interface::after, [data-theme="dark-high-contrast"] .search-filter-interface::after { background-image: linear-gradient(to right, transparent, var(--color-surface-dark, #1a1a2e)); } [data-theme="dark"] .smart-filter-tabs, [data-theme="dark-high-contrast"] .smart-filter-tabs { background: var(--gradient-footer-warm); } [data-theme="dark"] .smart-tab, [data-theme="dark-high-contrast"] .smart-tab { background: transparent; border-bottom-color: transparent; color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .smart-tab:hover, [data-theme="dark-high-contrast"] .smart-tab:hover { background: rgba(92, 67, 244, 0.06); color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .smart-tab.active, [data-theme="dark-high-contrast"] .smart-tab.active { background: var(--color-surface); border-bottom-color: rgba(168, 148, 255, 0.7); color: rgba(168, 148, 255, 0.9); } [data-theme="dark"] .smart-tab .tab-count, [data-theme="dark-high-contrast"] .smart-tab .tab-count { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .smart-tab.active .tab-count, [data-theme="dark-high-contrast"] .smart-tab.active .tab-count { background: rgba(92, 67, 244, 0.15); color: rgba(168, 148, 255, 0.9); } /* ========================================================================== SECTION 48: SEARCH WELCOME HEADER — Dark Mode ========================================================================== */ [data-theme="dark"] .search-welcome-header, [data-theme="dark-high-contrast"] .search-welcome-header, [data-theme="dark"] #Body[ux-anon="0"] .search-welcome-header, [data-theme="dark-high-contrast"] #Body[ux-anon="0"] .search-welcome-header { background: var(--color-banner, linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%)); } [data-theme="dark"] .search-welcome-header.welcome-authenticated, [data-theme="dark-high-contrast"] .search-welcome-header.welcome-authenticated { color: rgba(255, 255, 255, 0.9); border-bottom: none; background-image: linear-gradient(135deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.08) 50%, rgba(0, 255, 203, 0.03) 100%), linear-gradient(to right, rgba(168, 148, 255, 0.2), rgba(0, 255, 203, 0.1) 70%, transparent); background-size: 100% 100%, 100% 1px; background-position: top left, bottom left; background-repeat: no-repeat; } [data-theme="dark"] .action-summary-banner, [data-theme="dark-high-contrast"] .action-summary-banner { background: var(--color-glass-light-dark, rgba(255, 255, 255, 0.08)); color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .welcome-metrics, [data-theme="dark-high-contrast"] .welcome-metrics { background: var(--color-glass-light-dark, rgba(255, 255, 255, 0.08)); } /* ========================================================================== SECTION 49: SEARCH MODULE LAYOUT — Dark Mode Legacy camelCase visual rules deleted — covered by §49C dark mode. Only clean kebab-case overrides remain. ========================================================================== */ [data-theme="dark"] .search-section-header, [data-theme="dark-high-contrast"] .search-section-header { border-color: var(--color-border-dark, #444); color: var(--color-text-dark, #eaeaea); background-image: linear-gradient( to right, rgba(168, 148, 255, 0.12), rgba(0, 255, 203, 0.06) 70%, transparent ); } [data-theme="dark"] .search-section-header .section-title, [data-theme="dark-high-contrast"] .search-section-header .section-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .browse-cards-title, [data-theme="dark-high-contrast"] .browse-cards-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .search-load-more .command, [data-theme="dark-high-contrast"] .search-load-more .command { background: var(--color-surface-dark, #2d2d2d); border-color: var(--color-border-dark, #444); color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .search-load-more .command:hover, [data-theme="dark-high-contrast"] .search-load-more .command:hover { background: var(--color-surface-elevated-dark, #333); border-color: var(--color-primary-dark, #7c8aff); } [data-theme="dark"] .active-filters-section h3, [data-theme="dark-high-contrast"] .active-filters-section h3 { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .active-filters .filter-tag, [data-theme="dark-high-contrast"] .active-filters .filter-tag { background: var(--color-surface-dark, #2d2d2d); border-color: var(--color-border-dark, #444); } [data-theme="dark"] .active-filters .filter-tag .filter-label, [data-theme="dark-high-contrast"] .active-filters .filter-tag .filter-label { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .active-filters .filter-tag .filter-value, [data-theme="dark-high-contrast"] .active-filters .filter-tag .filter-value { color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .active-filters .filter-tag .filter-remove, [data-theme="dark-high-contrast"] .active-filters .filter-tag .filter-remove { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .active-filters .filter-tag.keyword-filter, [data-theme="dark-high-contrast"] .active-filters .filter-tag.keyword-filter { border-color: var(--color-primary-dark, #7c8aff); background: rgba(124, 138, 255, 0.1); } /* ========================================================================== SECTION 49C: FILTER BAR COMPONENT — Dark Mode ========================================================================== */ [data-theme="dark"] .filter-bar .filter-trigger, [data-theme="dark-high-contrast"] .filter-bar .filter-trigger { background-color: rgba(92, 67, 244, 0.06); color: var(--color-text-muted-dark, #999); border-color: rgba(92, 67, 244, 0.12); } [data-theme="dark"] .filter-bar .filter-trigger:hover, [data-theme="dark-high-contrast"] .filter-bar .filter-trigger:hover { border-color: rgba(168, 148, 255, 0.4); color: var(--color-text-dark, #eaeaea); background-color: rgba(92, 67, 244, 0.1); box-shadow: 0 2px 8px rgba(92, 67, 244, 0.08); } [data-theme="dark"] .filter-bar .filter-pill, [data-theme="dark-high-contrast"] .filter-bar .filter-pill { background-color: rgba(92, 67, 244, 0.06); border-color: rgba(92, 67, 244, 0.1); color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .filter-bar .filter-pill:hover, [data-theme="dark-high-contrast"] .filter-bar .filter-pill:hover { color: var(--color-text-dark, #eaeaea); background-color: rgba(92, 67, 244, 0.1); border-color: rgba(168, 148, 255, 0.3); box-shadow: 0 2px 8px rgba(92, 67, 244, 0.08); } [data-theme="dark"] .filter-bar .filter-pill.active, [data-theme="dark-high-contrast"] .filter-bar .filter-pill.active, [data-theme="dark"] .filter-bar .active-filter, [data-theme="dark-high-contrast"] .filter-bar .active-filter { background-color: var(--color-primary-dark, #7c8aff); color: #1a1a2e; } [data-theme="dark"] .filter-bar .filter-pill.sort, [data-theme="dark-high-contrast"] .filter-bar .filter-pill.sort { color: var(--color-text-dark, #eaeaea); background: transparent; border: none; } [data-theme="dark"] .filter-bar .clear-all, [data-theme="dark-high-contrast"] .filter-bar .clear-all { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .filter-bar .clear-all:hover, [data-theme="dark-high-contrast"] .filter-bar .clear-all:hover { color: var(--color-primary-dark, #7c8aff); } [data-theme="dark"] .breadcrumb-navigation, [data-theme="dark-high-contrast"] .breadcrumb-navigation, [data-theme="dark"] .breadcrumb-nav, [data-theme="dark-high-contrast"] .breadcrumb-nav { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .breadcrumb-navigation a, [data-theme="dark-high-contrast"] .breadcrumb-navigation a, [data-theme="dark"] .breadcrumb-nav a, [data-theme="dark-high-contrast"] .breadcrumb-nav a { color: var(--color-text-light-dark, #bbb); } [data-theme="dark"] .breadcrumb-navigation a:hover, [data-theme="dark-high-contrast"] .breadcrumb-navigation a:hover, [data-theme="dark"] .breadcrumb-nav a:hover, [data-theme="dark-high-contrast"] .breadcrumb-nav a:hover { color: var(--color-primary-dark, #7c8aff); } /* Section 50B: Breadcrumb Trail — Dark Mode */ [data-theme="dark"] .breadcrumb-trail .breadcrumb-item::after, [data-theme="dark-high-contrast"] .breadcrumb-trail .breadcrumb-item::after { color: var(--color-text-muted-dark, #666); } [data-theme="dark"] .breadcrumb-trail .breadcrumb-link, [data-theme="dark-high-contrast"] .breadcrumb-trail .breadcrumb-link { color: var(--color-text-light-dark, #bbb); } [data-theme="dark"] .breadcrumb-trail .breadcrumb-link:hover, [data-theme="dark-high-contrast"] .breadcrumb-trail .breadcrumb-link:hover { color: var(--color-primary-dark, #7c8aff); background-color: rgba(255, 255, 255, 0.05); } /* ========================================================================== SECTION 49D: SEARCH MODULE WRAPPER — Dark Mode SECTION 49E: SEARCH RESULTS CONTAINER — Dark Mode No overrides needed — these are structural layout (flex, width, padding). ========================================================================== */ /* ========================================================================== SECTION 49B: SEARCH FILTER DIALOG — Dark Mode ========================================================================== */ /* Drawer container */ [data-theme="dark"] .filters.form, [data-theme="dark-high-contrast"] .filters.form { background-color: var(--color-surface-dark, #1a1a2e); box-shadow: var(--shadow-md-dark, 0 4px 16px rgba(0, 0, 0, 0.5)); } /* Drawer title */ [data-theme="dark"] .filters.form .title, [data-theme="dark-high-contrast"] .filters.form .title { color: var(--color-text-dark, #eaeaea); } /* Filter group headings */ [data-theme="dark"] .search-module .filters .filter-group h4, [data-theme="dark-high-contrast"] .search-module .filters .filter-group h4 { color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .search-module .filters .filter-group .subcaption, [data-theme="dark-high-contrast"] .search-module .filters .filter-group .subcaption { color: var(--color-text-muted-dark, #999); } /* Facet borders */ [data-theme="dark"] .search-module .filters .facet, [data-theme="dark-high-contrast"] .search-module .filters .facet { border-top-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } /* Choices scrollbar */ [data-theme="dark"] .search-module .filters .facet .choices::-webkit-scrollbar-thumb, [data-theme="dark-high-contrast"] .search-module .filters .facet .choices::-webkit-scrollbar-thumb { background: var(--color-border-medium); } [data-theme="dark"] .search-module .filters .facet .choices::-webkit-scrollbar-thumb:hover, [data-theme="dark-high-contrast"] .search-module .filters .facet .choices::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } [data-theme="dark"] .search-module .filters .facet .choices::-webkit-scrollbar-track-piece, [data-theme="dark-high-contrast"] .search-module .filters .facet .choices::-webkit-scrollbar-track-piece { background: var(--color-surface-dark, #2d2d2d); } /* Checkbox labels */ [data-theme="dark"] .search-module .filters .filter-group .checkbox label, [data-theme="dark-high-contrast"] .search-module .filters .filter-group .checkbox label { color: var(--color-text-dark, #eaeaea); } /* Base filter group */ [data-theme="dark"] .search-module .filter-group-base .caption label, [data-theme="dark-high-contrast"] .search-module .filter-group-base .caption label { color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .search-module .filter-group-base .data label, [data-theme="dark-high-contrast"] .search-module .filter-group-base .data label { color: var(--color-text-muted-dark, #999); } [data-theme="dark"] .search-module .filter-group-base .data label .count, [data-theme="dark-high-contrast"] .search-module .filter-group-base .data label .count { background: var(--color-surface-dark, #2d2d2d); color: var(--color-text-dark, #eaeaea); } /* Sort / Distance options */ [data-theme="dark"] .search-module .filters .autocomplete-choices .autocomplete-item.item, [data-theme="dark-high-contrast"] .search-module .filters .autocomplete-choices .autocomplete-item.item { color: var(--color-text-dark, #eaeaea); border-bottom-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .search-module .filters .autocomplete-choices .autocomplete-item.item:hover, [data-theme="dark-high-contrast"] .search-module .filters .autocomplete-choices .autocomplete-item.item:hover { background-color: var(--color-surface-elevated-dark, #333); } [data-theme="dark"] .search-module .filters .autocomplete-choices .autocomplete-item.item.selected, [data-theme="dark-high-contrast"] .search-module .filters .autocomplete-choices .autocomplete-item.item.selected { color: var(--color-primary-dark, #7c8aff); background-color: rgba(92, 67, 244, 0.15); } /* Close / cancel buttons */ [data-theme="dark"] .filters.form > .filter-close, [data-theme="dark-high-contrast"] .filters.form > .filter-close { color: var(--color-text-dark, #eaeaea); } [data-theme="dark"] .filters.form > .filter-cancel, [data-theme="dark-high-contrast"] .filters.form > .filter-cancel { color: var(--color-text-muted-dark, #999); } /* Facet caption (drill-down heading) */ [data-theme="dark"] .search-container[ux-active-filter] .filter-group .facets .facet .caption, [data-theme="dark-high-contrast"] .search-container[ux-active-filter] .filter-group .facets .facet .caption { background-color: var(--color-surface-dark, #1a1a2e); border-bottom-color: var(--color-border-dark, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .search-container[ux-active-filter] .filter-group .facets .facet .caption::after, [data-theme="dark-high-contrast"] .search-container[ux-active-filter] .filter-group .facets .facet .caption::after { color: var(--color-text-muted-dark, #999); } /* Active facet choices container */ [data-theme="dark"] .search-container[ux-active-filter] .filter-group .facets .facet[ux-active-facet] .choices, [data-theme="dark-high-contrast"] .search-container[ux-active-filter] .filter-group .facets .facet[ux-active-facet] .choices { background-color: var(--color-surface-dark, #1a1a2e); } /* Active filter background */ [data-theme="dark"] .search-module[ux-active-filter] .filters, [data-theme="dark-high-contrast"] .search-module[ux-active-filter] .filters { background-color: var(--color-surface-dark, #1a1a2e); } /* In-drawer modify commands */ [data-theme="dark"] .filters.form .modifyCommands .command, [data-theme="dark-high-contrast"] .filters.form .modifyCommands .command { background-color: var(--color-primary); color: var(--color-white); } /* --- Onboarding (Section 51) --- */ [data-theme="dark"] .onboarding, [data-theme="dark-high-contrast"] .onboarding { box-shadow: var(--shadow-md-dark, 0 4px 16px rgba(0, 0, 0, 0.4)); } [data-theme="dark"] .onboarding .hero-illustration img, [data-theme="dark-high-contrast"] .onboarding .hero-illustration img { filter: brightness(0.85); } [data-theme="dark"] .onboarding .how-it-works .step, [data-theme="dark-high-contrast"] .onboarding .how-it-works .step { background: var(--color-surface-dark, #2d2d2d); border-color: var(--color-border-dark, #444); } [data-theme="dark"] .onboarding .how-it-works .step:hover, [data-theme="dark-high-contrast"] .onboarding .how-it-works .step:hover { background: var(--color-surface-elevated-dark, #333); } [data-theme="dark"] .onboarding .onboarding-tip .tip-content, [data-theme="dark-high-contrast"] .onboarding .onboarding-tip .tip-content { background: rgba(0, 255, 203, 0.06); border-color: rgba(0, 255, 203, 0.15); } [data-theme="dark"] .onboarding .add-more-prompt, [data-theme="dark-high-contrast"] .onboarding .add-more-prompt { background: rgba(var(--color-primary-rgb), 0.1); border-color: rgba(var(--color-primary-rgb), 0.25); } [data-theme="dark"] .onboarding .add-more-prompt:hover, [data-theme="dark-high-contrast"] .onboarding .add-more-prompt:hover { background: rgba(var(--color-primary-rgb), 0.15); } [data-theme="dark"] .onboarding .progress-step, [data-theme="dark-high-contrast"] .onboarding .progress-step { background-color: var(--color-border-dark, #444); } [data-theme="dark"] .onboarding .how-it-works .step.completed, [data-theme="dark-high-contrast"] .onboarding .how-it-works .step.completed { background: rgba(0, 255, 203, 0.08); border-color: rgba(0, 255, 203, 0.3); } [data-theme="dark"] .onboarding .disable-warning, [data-theme="dark-high-contrast"] .onboarding .disable-warning { background: rgba(245, 158, 11, 0.1); } [data-theme="dark"] .onboarding .disable-warning h5, [data-theme="dark-high-contrast"] .onboarding .disable-warning h5 { color: #f59e0b; } /* Payment Option Cards */ [data-theme="dark"] .onboarding .payment-option, [data-theme="dark-high-contrast"] .onboarding .payment-option { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .onboarding .payment-option:hover, [data-theme="dark-high-contrast"] .onboarding .payment-option:hover { background: var(--color-surface-elevated); border-color: var(--color-border-strong); } [data-theme="dark"] .onboarding .payment-option:has(.toggle-checkbox:checked), [data-theme="dark-high-contrast"] .onboarding .payment-option:has(.toggle-checkbox:checked) { background: rgba(var(--color-primary-rgb), 0.08); border-color: var(--color-primary); } [data-theme="dark"] .onboarding .payment-option .benefits, [data-theme="dark-high-contrast"] .onboarding .payment-option .benefits { color: var(--color-text-muted); } /* Disable Action Card */ [data-theme="dark"] .onboarding .disable-action-card, [data-theme="dark-high-contrast"] .onboarding .disable-action-card { background: linear-gradient( 135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100% ); border-color: rgba(245, 158, 11, 0.3); } /* Warning Button */ [data-theme="dark"] .command.btn-warning, [data-theme="dark-high-contrast"] .command.btn-warning { background: var(--color-warning); color: #1a1a1a; } [data-theme="dark"] .command.btn-ghost.btn-warning, [data-theme="dark-high-contrast"] .command.btn-ghost.btn-warning { background: transparent; color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); } /* Security Badges */ [data-theme="dark"] .onboarding .security-badge, [data-theme="dark-high-contrast"] .onboarding .security-badge { background: var(--color-surface); color: var(--color-text-muted); } /* ========================================================================== Section 55: Icon Utilities — Dark Mode Invert black SVG icons for dark surfaces. Boost colored SVG icons. Base icon patterns are in component-library.css Section 55. SVG URLs are in search.css / application.css. ========================================================================== */ /* --- Invert black SVGs to white --- */ [data-theme="dark"] .smart-tab .tab-icon, [data-theme="dark-high-contrast"] .smart-tab .tab-icon, [data-theme="dark"] .product-stats .product-stat-icon, [data-theme="dark-high-contrast"] .product-stats .product-stat-icon, [data-theme="dark"] .product-actions .cmdSaveFavorite .icon, [data-theme="dark-high-contrast"] .product-actions .cmdSaveFavorite .icon, [data-theme="dark"] .product-actions .social-watch-toggle .icon, [data-theme="dark-high-contrast"] .product-actions .social-watch-toggle .icon, [data-theme="dark"] .metric-chip:not(.active) .metric-icon, [data-theme="dark-high-contrast"] .metric-chip:not(.active) .metric-icon, [data-theme="dark"] .listing-card .hint-icon, [data-theme="dark-high-contrast"] .listing-card .hint-icon, [data-theme="dark"] .inbox-item .inbox-type .type-icon, [data-theme="dark-high-contrast"] .inbox-item .inbox-type .type-icon { filter: brightness(0) invert(1); } /* --- Boost colored SVGs for dark surfaces --- */ [data-theme="dark"] .listing-card .action-icon, [data-theme="dark-high-contrast"] .listing-card .action-icon, [data-theme="dark"] .listing-card .no-photo-placeholder .photo-icon, [data-theme="dark-high-contrast"] .listing-card .no-photo-placeholder .photo-icon { filter: brightness(1.3); } /* ========================================================================== Section 56: Dialog — Dark Mode Clean dialog component dark overrides. Base styles are in component-library.css Section 56. ========================================================================== */ /* --- Dialog Header --- */ [data-theme="dark"] .dialog-header, [data-theme="dark-high-contrast"] .dialog-header { background-color: var(--color-background); } /* --- Dialog Close — white SVG for dark backgrounds --- */ [data-theme="dark"] .dialog-close, [data-theme="dark-high-contrast"] .dialog-close { background-image: url("/images/icon/close-white.svg"); } /* --- Dialog Back — white SVG for dark backgrounds --- */ [data-theme="dark"] .dialog-back, [data-theme="dark-high-contrast"] .dialog-back { background-image: url("/images/icon/arrow-left-white.svg"); } /* --- Dialog Status (HUD) --- */ [data-theme="dark"] .dialog-status, [data-theme="dark-high-contrast"] .dialog-status { border-color: var(--color-border); color: var(--color-warning, orange); } /* --- Dialog Delete/Remove — swap to white trash icon (WIP) --- */ [data-theme="dark"] .dialog-cmd-delete::after, [data-theme="dark-high-contrast"] .dialog-cmd-delete::after, [data-theme="dark"] .dialog-cmd-remove::before, [data-theme="dark-high-contrast"] .dialog-cmd-remove::before { filter: brightness(0) invert(1); } /* --- Progress Cancel — white close icon --- */ [data-theme="dark"] .progress-cancel, [data-theme="dark-high-contrast"] .progress-cancel { background-image: url("/images/icon/close-white.svg"); } /* --- List Check Toggle — invert dark checkbox icons (WIP) --- */ [data-theme="dark"] .list-check-toggle, [data-theme="dark-high-contrast"] .list-check-toggle { filter: brightness(0) invert(1); } /* --- Dialog Loading Overlay --- */ [data-theme="dark"] .dialog-loading, [data-theme="dark-high-contrast"] .dialog-loading { background-color: rgba(0, 0, 0, 0.75); } /* --- Drawer Footer --- */ [data-theme="dark"] .dialog-drawer .dialog-footer, [data-theme="dark-high-contrast"] .dialog-drawer .dialog-footer { background-color: rgba(255, 255, 255, 0.02); } /* -------------------------------------------------------------------------- Section 57: Selection Card — Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] .selection-card, [data-theme="dark-high-contrast"] .selection-card { border-color: rgba(255, 255, 255, 0.12); background-color: transparent; } [data-theme="dark"] .selection-card:hover, [data-theme="dark-high-contrast"] .selection-card:hover { border-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .selection-card.selected, [data-theme="dark-high-contrast"] .selection-card.selected { border-color: var(--color-primary); background-color: rgba(92, 67, 244, 0.1); box-shadow: 0 0 0 1px rgba(92, 67, 244, 0.3); } [data-theme="dark"] .selection-card .selection-description, [data-theme="dark-high-contrast"] .selection-card .selection-description { color: rgba(255, 255, 255, 0.5); } /* Merchandise Payment Options — Dark Mode */ [data-theme="dark"] .merch-payment-option, [data-theme="dark-high-contrast"] .merch-payment-option { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .merch-payment-option:hover, [data-theme="dark-high-contrast"] .merch-payment-option:hover { border-color: rgba(92, 67, 244, 0.5); background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(92, 67, 244, 0.12) 100%); box-shadow: 0 4px 16px rgba(92, 67, 244, 0.2); } [data-theme="dark"] .merch-payment-option.selected, [data-theme="dark-high-contrast"] .merch-payment-option.selected { border-color: var(--color-primary); background: linear-gradient(135deg, rgba(92, 67, 244, 0.12) 0%, rgba(92, 67, 244, 0.18) 100%); box-shadow: 0 0 0 1px rgba(92, 67, 244, 0.4), 0 4px 20px rgba(92, 67, 244, 0.25); } [data-theme="dark"] .merch-payment-option .selection-icon, [data-theme="dark-high-contrast"] .merch-payment-option .selection-icon { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .merch-payment-option:hover .selection-icon, [data-theme="dark-high-contrast"] .merch-payment-option:hover .selection-icon { background: rgba(92, 67, 244, 0.15); } [data-theme="dark"] .merch-payment-option.selected .selection-icon, [data-theme="dark-high-contrast"] .merch-payment-option.selected .selection-icon { background: rgba(92, 67, 244, 0.2); } [data-theme="dark"] .merch-payment-option .selection-icon .icon, [data-theme="dark-high-contrast"] .merch-payment-option .selection-icon .icon { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .merch-payment-option:hover .selection-icon .icon, [data-theme="dark-high-contrast"] .merch-payment-option:hover .selection-icon .icon, [data-theme="dark"] .merch-payment-option.selected .selection-icon .icon, [data-theme="dark-high-contrast"] .merch-payment-option.selected .selection-icon .icon { color: var(--color-primary-light, #a78bfa); } [data-theme="dark"] .merch-payment-option .selection-description, [data-theme="dark-high-contrast"] .merch-payment-option .selection-description { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .merch-payment-option .benefit-tag, [data-theme="dark-high-contrast"] .merch-payment-option .benefit-tag { background: rgba(34, 197, 94, 0.15); color: rgba(134, 239, 172, 0.95); } [data-theme="dark"] .merch-payment-option.selected .benefit-tag, [data-theme="dark-high-contrast"] .merch-payment-option.selected .benefit-tag { background: rgba(34, 197, 94, 0.2); } /* -------------------------------------------------------------------------- Section 58: Notice Banner — Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] .notice-banner, [data-theme="dark-high-contrast"] .notice-banner { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--color-text); } [data-theme="dark"] .notice-banner.notice-info, [data-theme="dark-high-contrast"] .notice-banner.notice-info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); color: rgba(147, 197, 253, 0.95); } [data-theme="dark"] .notice-banner.notice-warning, [data-theme="dark-high-contrast"] .notice-banner.notice-warning { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); color: rgba(253, 224, 151, 0.95); } [data-theme="dark"] .notice-banner.notice-success, [data-theme="dark-high-contrast"] .notice-banner.notice-success { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); color: rgba(110, 231, 183, 0.95); } [data-theme="dark"] .notice-banner.notice-error, [data-theme="dark-high-contrast"] .notice-banner.notice-error { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: rgba(252, 165, 165, 0.95); } /* -------------------------------------------------------------------------- Section 58a: Availability Dialog Enhancements — Dark Mode -------------------------------------------------------------------------- */ /* Variant Card dark mode */ [data-theme="dark"] .variant-card, [data-theme="dark-high-contrast"] .variant-card { background: var(--gradient-card-base); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .variant-card::before, [data-theme="dark-high-contrast"] .variant-card::before { background: linear-gradient(90deg, rgba(168, 148, 255, 0.2) 0%, rgba(0, 255, 203, 0.15) 100% ); } [data-theme="dark"] .variant-card:hover, [data-theme="dark-high-contrast"] .variant-card:hover { border-color: rgba(168, 148, 255, 0.25); } [data-theme="dark"] .variant-card-header .variant-caption, [data-theme="dark-high-contrast"] .variant-card-header .variant-caption { color: var(--color-text-warm); } [data-theme="dark"] .variant-card-header .variant-subcaption, [data-theme="dark-high-contrast"] .variant-card-header .variant-subcaption { color: var(--color-text-warm-muted); } /* Toggle Switch dark mode */ [data-theme="dark"] .option-toggle .toggle-switch, [data-theme="dark-high-contrast"] .option-toggle .toggle-switch { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .option-toggle .toggle-switch::after, [data-theme="dark-high-contrast"] .option-toggle .toggle-switch::after { background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch, [data-theme="dark-high-contrast"] .option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch { background: var(--color-primary); box-shadow: 0 2px 12px rgba(168, 148, 255, 0.35); } [data-theme="dark"] .option-toggle .toggle-text, [data-theme="dark-high-contrast"] .option-toggle .toggle-text { color: var(--color-text-warm-body); } /* Preference Grid dark mode */ [data-theme="dark"] .pref-grid, [data-theme="dark-high-contrast"] .pref-grid { border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .pref-grid-header, [data-theme="dark-high-contrast"] .pref-grid-header { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .pref-grid-row, [data-theme="dark-high-contrast"] .pref-grid-row { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .pref-grid-row:hover, [data-theme="dark-high-contrast"] .pref-grid-row:hover { background: rgba(var(--color-primary-rgb), 0.06); } [data-theme="dark"] .pref-grid-locked, [data-theme="dark-high-contrast"] .pref-grid-locked { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .pref-grid-locked:hover, [data-theme="dark-high-contrast"] .pref-grid-locked:hover { background: rgba(255, 255, 255, 0.02); } /* Privacy Choices Dialog dark mode */ [data-theme="dark"] #Interactions .dialog-privacy-choices.view[ux-modal], [data-theme="dark-high-contrast"] #Interactions .dialog-privacy-choices.view[ux-modal] { background: var(--color-surface); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .dialog-privacy-choices > .dialog-header, [data-theme="dark-high-contrast"] .dialog-privacy-choices > .dialog-header { background: var(--color-surface); border-bottom-color: rgba(255, 255, 255, 0.1); } /* Summary Panel dark mode */ [data-theme="dark"] .summary-panel, [data-theme="dark-high-contrast"] .summary-panel { background: var(--gradient-footer-warm); border-color: rgba(168, 148, 255, 0.1); } [data-theme="dark"] .summary-panel .stat-item, [data-theme="dark-high-contrast"] .summary-panel .stat-item { background: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .summary-panel .stat-label, [data-theme="dark-high-contrast"] .summary-panel .stat-label { color: var(--color-text-warm-muted); } [data-theme="dark"] .summary-panel .stat-value, [data-theme="dark-high-contrast"] .summary-panel .stat-value { color: var(--color-primary-light-solid); } /* Bulk Actions Panel dark mode */ [data-theme="dark"] .bulk-actions-panel, [data-theme="dark-high-contrast"] .bulk-actions-panel { background: linear-gradient( 135deg, rgba(168, 148, 255, 0.06) 0%, rgba(0, 255, 203, 0.03) 100% ); border-color: rgba(168, 148, 255, 0.1); } [data-theme="dark"] .bulk-actions-panel .bulk-action-row:not(:last-child), [data-theme="dark-high-contrast"] .bulk-actions-panel .bulk-action-row:not(:last-child) { border-color: rgba(168, 148, 255, 0.1); } /* Live Operation Notice dark mode */ [data-theme="dark"] .live-operation-notice, [data-theme="dark-high-contrast"] .live-operation-notice { background: linear-gradient( 90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100% ); border-color: rgba(59, 130, 246, 0.2); } [data-theme="dark"] .live-operation-notice .notice-content, [data-theme="dark-high-contrast"] .live-operation-notice .notice-content { color: var(--color-text-warm-body); } [data-theme="dark"] .live-operation-notice .notice-content strong, [data-theme="dark-high-contrast"] .live-operation-notice .notice-content strong { color: rgba(147, 197, 253, 0.95); } /* Save Operation Indicator dark mode */ [data-theme="dark"] .save-operation-indicator.live-indicator, [data-theme="dark-high-contrast"] .save-operation-indicator.live-indicator { color: rgba(147, 197, 253, 0.95); } [data-theme="dark"] .save-operation-indicator.draft-indicator, [data-theme="dark-high-contrast"] .save-operation-indicator.draft-indicator { color: var(--color-text-muted); } /* Selection Cards dark mode */ [data-theme="dark"] #Dlg_Availability .selection-card, [data-theme="dark-high-contrast"] #Dlg_Availability .selection-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] #Dlg_Availability .selection-card:hover, [data-theme="dark-high-contrast"] #Dlg_Availability .selection-card:hover { background: rgba(168, 148, 255, 0.08); border-color: rgba(168, 148, 255, 0.2); } [data-theme="dark"] #Dlg_Availability .selection-card:has(input:checked), [data-theme="dark-high-contrast"] #Dlg_Availability .selection-card:has(input:checked) { background: linear-gradient( 135deg, rgba(168, 148, 255, 0.1) 0%, rgba(168, 148, 255, 0.04) 100% ); border-color: var(--color-primary); } [data-theme="dark"] #Dlg_Availability .selection-label, [data-theme="dark-high-contrast"] #Dlg_Availability .selection-label { color: var(--color-text-warm); } [data-theme="dark"] #Dlg_Availability .selection-description, [data-theme="dark-high-contrast"] #Dlg_Availability .selection-description { color: var(--color-text-warm-muted); } [data-theme="dark"] #Dlg_Availability .backorder-prep, [data-theme="dark-high-contrast"] #Dlg_Availability .backorder-prep { background: rgba(255, 255, 255, 0.03); border-color: rgba(168, 148, 255, 0.15); } /* -------------------------------------------------------------------------- Section 59: Progress Bar — Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] .progress-bar, [data-theme="dark-high-contrast"] .progress-bar { background-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .progress-text, [data-theme="dark-high-contrast"] .progress-text { color: rgba(255, 255, 255, 0.5); } /* -------------------------------------------------------------------------- Section 60: Checklist — Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] .checklist-item, [data-theme="dark-high-contrast"] .checklist-item { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .checklist-item .checklist-description, [data-theme="dark-high-contrast"] .checklist-item .checklist-description { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .checklist-item.completed, [data-theme="dark-high-contrast"] .checklist-item.completed { background-color: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .checklist-item.completed .checklist-title, [data-theme="dark-high-contrast"] .checklist-item.completed .checklist-title { color: rgba(110, 231, 183, 0.95); } [data-theme="dark"] .checklist-item.pending, [data-theme="dark-high-contrast"] .checklist-item.pending { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .checklist-item.optional, [data-theme="dark-high-contrast"] .checklist-item.optional { background-color: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.08); } /* --- 61. Step Indicator --- */ [data-theme="dark"] .step-indicator, [data-theme="dark-high-contrast"] .step-indicator { border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .step-indicator-dot, [data-theme="dark-high-contrast"] .step-indicator-dot { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .step-indicator-dot.step-active, [data-theme="dark-high-contrast"] .step-indicator-dot.step-active { box-shadow: 0 0 0 3px rgba(62, 77, 255, 0.3); } [data-theme="dark"] .step-indicator-dot.step-done, [data-theme="dark-high-contrast"] .step-indicator-dot.step-done { background: var(--color-success); } /* --- 62. Settings Section --- */ [data-theme="dark"] .settings-header h4, [data-theme="dark-high-contrast"] .settings-header h4 { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .settings-tip, [data-theme="dark-high-contrast"] .settings-tip { color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .settings-section.settings-highlight, [data-theme="dark-high-contrast"] .settings-section.settings-highlight { background-color: rgba(255, 255, 255, 0.04); } /* --- 63. Detail Section --- */ [data-theme="dark"] .detail-section, [data-theme="dark-high-contrast"] .detail-section { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .detail-section-header, [data-theme="dark-high-contrast"] .detail-section-header { background-image: linear-gradient( to right, rgba(168, 148, 255, 0.2), rgba(0, 255, 203, 0.08) 70%, transparent ); } [data-theme="dark"] .detail-section-title, [data-theme="dark-high-contrast"] .detail-section-title { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .detail-section-help, [data-theme="dark-high-contrast"] .detail-section-help { color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .detail-section-help:hover, [data-theme="dark-high-contrast"] .detail-section-help:hover { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .detail-section-command, [data-theme="dark-high-contrast"] .detail-section-command { color: var(--color-primary); background: rgba(var(--color-primary-rgb, 92, 67, 244), 0.1); } /* --- 64. Analytics Card --- */ [data-theme="dark"] .analytics-card, [data-theme="dark-high-contrast"] .analytics-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .analytics-card:hover, [data-theme="dark-high-contrast"] .analytics-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .analytics-card-icon, [data-theme="dark-high-contrast"] .analytics-card-icon { background-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.15); } [data-theme="dark"] .analytics-card-title, [data-theme="dark-high-contrast"] .analytics-card-title { color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .analytics-card-value, [data-theme="dark-high-contrast"] .analytics-card-value { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .analytics-card-label, [data-theme="dark-high-contrast"] .analytics-card-label { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .analytics-insight-badge, [data-theme="dark-high-contrast"] .analytics-insight-badge { background: rgba(255, 180, 0, 0.15); border-color: rgba(255, 180, 0, 0.3); } /* --- 65. Market Card --- */ [data-theme="dark"] .market-card, [data-theme="dark-high-contrast"] .market-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .market-card:hover, [data-theme="dark-high-contrast"] .market-card:hover { box-shadow: 0 8px 24px rgba(92, 67, 244, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .market-card.primary, [data-theme="dark-high-contrast"] .market-card.primary { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb, 92, 67, 244), 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--color-primary-rgb, 92, 67, 244), 0.2); } [data-theme="dark"] .market-card-title, [data-theme="dark-high-contrast"] .market-card-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .market-card-label, [data-theme="dark-high-contrast"] .market-card-label { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .market-card-min, [data-theme="dark"] .market-card-max, [data-theme="dark-high-contrast"] .market-card-min, [data-theme="dark-high-contrast"] .market-card-max { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .market-card.primary .market-card-min, [data-theme="dark"] .market-card.primary .market-card-max, [data-theme="dark-high-contrast"] .market-card.primary .market-card-min, [data-theme="dark-high-contrast"] .market-card.primary .market-card-max { color: var(--color-primary); } [data-theme="dark"] .market-info-banner, [data-theme="dark-high-contrast"] .market-info-banner { background: rgba(92, 67, 244, 0.08); border-color: rgba(92, 67, 244, 0.15); color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .market-info-note, [data-theme="dark-high-contrast"] .market-info-note { color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.03); border-left-color: rgba(255, 255, 255, 0.1); } /* --- 66. Listing Mode Display --- */ [data-theme="dark"] .mode-display, [data-theme="dark-high-contrast"] .mode-display { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .mode-display-icon, [data-theme="dark-high-contrast"] .mode-display-icon { background-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.15); } [data-theme="dark"] .mode-display-title, [data-theme="dark-high-contrast"] .mode-display-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .mode-display-desc, [data-theme="dark-high-contrast"] .mode-display-desc { color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .mode-display-actions .command, [data-theme="dark-high-contrast"] .mode-display-actions .command { background: var(--color-primary); border-color: var(--color-primary); color: white; } [data-theme="dark"] .mode-display-actions .command:hover, [data-theme="dark-high-contrast"] .mode-display-actions .command:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } [data-theme="dark"] .mode-display-pending, [data-theme="dark-high-contrast"] .mode-display-pending { background: rgba(255, 180, 0, 0.1); border-left-color: var(--color-warning); color: rgba(255, 255, 255, 0.7); } /* --- 67. Variant Block --- */ [data-theme="dark"] .variant-block, [data-theme="dark-high-contrast"] .variant-block { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .variant-block:hover, [data-theme="dark-high-contrast"] .variant-block:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .variant-block-title, [data-theme="dark-high-contrast"] .variant-block-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .variant-block-subtitle, [data-theme="dark-high-contrast"] .variant-block-subtitle { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .variant-block-thumb, [data-theme="dark-high-contrast"] .variant-block-thumb { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .variant-block-badge, [data-theme="dark-high-contrast"] .variant-block-badge { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .variant-block-badge::before, [data-theme="dark-high-contrast"] .variant-block-badge::before { background: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .variant-block-badge.live, [data-theme="dark-high-contrast"] .variant-block-badge.live { background: rgba(34, 197, 94, 0.15); color: #4ade80; } [data-theme="dark"] .variant-block-badge.live::before, [data-theme="dark-high-contrast"] .variant-block-badge.live::before { background: #4ade80; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); } [data-theme="dark"] .variant-block-badge.draft, [data-theme="dark-high-contrast"] .variant-block-badge.draft { background: rgba(92, 67, 244, 0.15); color: rgba(168, 148, 255, 0.9); } [data-theme="dark"] .variant-block-badge.draft::before, [data-theme="dark-high-contrast"] .variant-block-badge.draft::before { background: rgba(168, 148, 255, 0.9); box-shadow: 0 0 0 2px rgba(92, 67, 244, 0.2); } [data-theme="dark"] .variant-block-packaging, [data-theme="dark"] .variant-block-meetup, [data-theme="dark-high-contrast"] .variant-block-packaging, [data-theme="dark-high-contrast"] .variant-block-meetup { color: rgba(255, 255, 255, 0.55); } /* --- 68. Summary Card Strip --- */ [data-theme="dark"] .summary-card, [data-theme="dark-high-contrast"] .summary-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .summary-card:hover, [data-theme="dark-high-contrast"] .summary-card:hover { box-shadow: 0 4px 16px rgba(92, 67, 244, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .summary-card.live-operation, [data-theme="dark-high-contrast"] .summary-card.live-operation { background: linear-gradient(160deg, rgba(34, 197, 94, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%); } [data-theme="dark"] .summary-card.draft-operation, [data-theme="dark-high-contrast"] .summary-card.draft-operation { background: linear-gradient(160deg, rgba(92, 67, 244, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%); } [data-theme="dark"] .summary-card-value, [data-theme="dark-high-contrast"] .summary-card-value { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .summary-card-label, [data-theme="dark-high-contrast"] .summary-card-label { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .summary-card .empty-state .empty-message, [data-theme="dark-high-contrast"] .summary-card .empty-state .empty-message { color: rgba(255, 255, 255, 0.35); } /* --- 69. Attribute Flow --- */ [data-theme="dark"] .attribute-flow-header, [data-theme="dark-high-contrast"] .attribute-flow-header { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .attribute-flow-label, [data-theme="dark-high-contrast"] .attribute-flow-label { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .attribute-item, [data-theme="dark-high-contrast"] .attribute-item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .attribute-item:hover, [data-theme="dark-high-contrast"] .attribute-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 2px 8px rgba(92, 67, 244, 0.08); } [data-theme="dark"] .attribute-item strong, [data-theme="dark-high-contrast"] .attribute-item strong { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .attribute-item[ux-variation], [data-theme="dark-high-contrast"] .attribute-item[ux-variation] { border-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.6); background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 92, 67, 244), 0.2) 0%, rgba(var(--color-primary-rgb, 92, 67, 244), 0.1) 100%); box-shadow: 0 1px 3px rgba(var(--color-primary-rgb, 92, 67, 244), 0.15); } [data-theme="dark"] .attribute-item[ux-variation] strong, [data-theme="dark-high-contrast"] .attribute-item[ux-variation] strong { color: rgba(168, 148, 255, 1); } [data-theme="dark"] .attribute-item[ux-variation]:hover, [data-theme="dark-high-contrast"] .attribute-item[ux-variation]:hover { background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 92, 67, 244), 0.3) 0%, rgba(var(--color-primary-rgb, 92, 67, 244), 0.15) 100%); border-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.7); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 92, 67, 244), 0.25); } /* Expandable attribute flow - dark mode fade gradient */ [data-theme="dark"] .attribute-flow-wrap[ux-expandable]:not([ux-expanded]) .attribute-flow::after, [data-theme="dark-high-contrast"] .attribute-flow-wrap[ux-expandable]:not([ux-expanded]) .attribute-flow::after { background: linear-gradient(to bottom, transparent, var(--color-surface, #1a1a2e)); } [data-theme="dark"] .attribute-flow-empty, [data-theme="dark-high-contrast"] .attribute-flow-empty { color: rgba(255, 255, 255, 0.35); } /* --- 70. Photo Card --- */ [data-theme="dark"] .photo-card, [data-theme="dark-high-contrast"] .photo-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .photo-card:hover, [data-theme="dark-high-contrast"] .photo-card:hover { border-color: rgba(168, 148, 255, 0.25); box-shadow: 0 12px 28px rgba(92, 67, 244, 0.15), 0 4px 10px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .photo-card-handle, [data-theme="dark-high-contrast"] .photo-card-handle { background-color: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .photo-card-add, [data-theme="dark-high-contrast"] .photo-card-add { background: linear-gradient(135deg, rgba(92, 67, 244, 0.04) 0%, rgba(0, 255, 203, 0.02) 100%); border-color: rgba(168, 148, 255, 0.2); } [data-theme="dark"] .photo-card-add:hover, [data-theme="dark-high-contrast"] .photo-card-add:hover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb, 92, 67, 244), 0.08); } /* --- 71. Detail Page Content --- */ [data-theme="dark"] .sticky-status-bar .command-button-group.btn-primary, [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-primary { box-shadow: 0 2px 8px rgba(92, 67, 244, 0.4); } [data-theme="dark"] .sticky-status-bar .command-button-group.btn-primary:hover, [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-primary:hover { box-shadow: 0 8px 24px rgba(92, 67, 244, 0.5); } /* "Up to Date" state in dark mode */ [data-theme="dark"] .sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]), [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); box-shadow: none; } [data-theme="dark"] .sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) .timestamp, [data-theme="dark-high-contrast"] .sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) .timestamp { color: #4ade80; } [data-theme="dark"] .searchDetail .back-to-search a, [data-theme="dark-high-contrast"] .searchDetail .back-to-search a { color: var(--color-primary); } [data-theme="dark"] .primary-commands .command.cmdAdd, [data-theme="dark-high-contrast"] .primary-commands .command.cmdAdd { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.12); color: var(--color-primary); } [data-theme="dark"] .primary-commands .command.cmdAdd:hover, [data-theme="dark-high-contrast"] .primary-commands .command.cmdAdd:hover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb, 92, 67, 244), 0.1); } [data-theme="dark"] .detail-section.taxonomy .saved-value p, [data-theme="dark-high-contrast"] .detail-section.taxonomy .saved-value p { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .detail-section.taxonomy .saved-value p + p, [data-theme="dark-high-contrast"] .detail-section.taxonomy .saved-value p + p { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .detail-section.describe .description, [data-theme="dark-high-contrast"] .detail-section.describe .description { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .detail-section.describe .description h1, [data-theme="dark"] .detail-section.describe .description h2, [data-theme="dark-high-contrast"] .detail-section.describe .description h1, [data-theme="dark-high-contrast"] .detail-section.describe .description h2 { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .detail-section.describe .description h3, [data-theme="dark-high-contrast"] .detail-section.describe .description h3 { color: rgba(168, 148, 255, 0.7); border-bottom-color: rgba(168, 148, 255, 0.1); } [data-theme="dark"] .detail-section.describe .description strong, [data-theme="dark-high-contrast"] .detail-section.describe .description strong { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .detail-section.describe .description li::before, [data-theme="dark-high-contrast"] .detail-section.describe .description li::before { background: rgba(168, 148, 255, 0.4); } /* Page canvas — dark equivalent of warm violet-to-teal gradient */ [data-theme="dark"] .stock-detail, [data-theme="dark-high-contrast"] .stock-detail { background: linear-gradient(180deg, rgba(92, 67, 244, 0.04) 0%, rgba(92, 67, 244, 0.02) 40%, rgba(0, 255, 203, 0.01) 100%); } /* Section hover lift in dark mode */ [data-theme="dark"] .detail-section:hover, [data-theme="dark-high-contrast"] .detail-section:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); } /* Market analysis section — violet+teal atmospheric tint */ [data-theme="dark"] .market-analysis.detail-section, [data-theme="dark-high-contrast"] .market-analysis.detail-section { background: linear-gradient(135deg, rgba(92, 67, 244, 0.06) 0%, rgba(0, 255, 203, 0.03) 50%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(168, 148, 255, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(168, 148, 255, 0.06); } /* Generated listing welcome — celebratory tint in dark */ [data-theme="dark"] .generated-listing-welcome.detail-section, [data-theme="dark-high-contrast"] .generated-listing-welcome.detail-section { background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(0, 255, 203, 0.04) 100%); border-color: rgba(168, 148, 255, 0.2); box-shadow: 0 4px 24px rgba(92, 67, 244, 0.1); } [data-theme="dark"] #Body[ux-anon="0"] .search-welcome-header .welcome-title, [data-theme="dark-high-contrast"] #Body[ux-anon="0"] .search-welcome-header .welcome-title { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .generated-listing-welcome .welcome-subtitle, [data-theme="dark-high-contrast"] .generated-listing-welcome .welcome-subtitle { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] #Body[ux-anon="0"] .search-welcome-header .welcome-content p, [data-theme="dark-high-contrast"] #Body[ux-anon="0"] .search-welcome-header .welcome-content p, [data-theme="dark"] .generated-listing-welcome .welcome-content p, [data-theme="dark-high-contrast"] .generated-listing-welcome .welcome-content p { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .generated-listing-welcome .next-steps .step, [data-theme="dark-high-contrast"] .generated-listing-welcome .next-steps .step { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .generated-listing-welcome .step-number, [data-theme="dark-high-contrast"] .generated-listing-welcome .step-number { background: rgba(92, 67, 244, 0.15); color: rgba(168, 148, 255, 0.9); } [data-theme="dark"] .generated-listing-welcome .welcome-note, [data-theme="dark-high-contrast"] .generated-listing-welcome .welcome-note { background: rgba(92, 67, 244, 0.08); color: rgba(255, 255, 255, 0.5); } /* Photo nudge text */ [data-theme="dark"] .photo-nudge, [data-theme="dark-high-contrast"] .photo-nudge { color: rgba(255, 255, 255, 0.35); } /* AI-generated badge */ [data-theme="dark"] .ai-generated-badge, [data-theme="dark-high-contrast"] .ai-generated-badge { background: linear-gradient(135deg, rgba(92, 67, 244, 0.15) 0%, rgba(0, 255, 203, 0.08) 100%); color: rgba(168, 148, 255, 0.7); border-color: rgba(168, 148, 255, 0.15); } /* Photo section — subtle violet fade */ [data-theme="dark"] .photo-manager.detail-section, [data-theme="dark-high-contrast"] .photo-manager.detail-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(92, 67, 244, 0.03) 100%); } /* Description section — subtle teal fade */ [data-theme="dark"] .describe.detail-section, [data-theme="dark-high-contrast"] .describe.detail-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 255, 203, 0.02) 100%); } /* --- 72. Listing Detail — State-Driven Dark Mode --- */ /* A. Section gating overlay — darker backdrop */ [data-theme="dark"] .stock-detail > .section::after, [data-theme="dark-high-contrast"] .stock-detail > .section::after { background-color: rgba(20, 20, 30, 0.7); } /* D. Subdued publish button in dark mode */ [data-theme="dark"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .sticky-status-bar .command-button-group.btn-primary, [data-theme="dark-high-contrast"] .stock-detail[data-published-state="published"][data-has-pending-changes="false"] .sticky-status-bar .command-button-group.btn-primary { background-color: var(--color-surface); border-color: rgba(92, 67, 244, 0.5); color: rgba(255, 255, 255, 0.5); } /* E. Changes badge in dark mode */ [data-theme="dark"] .stock-detail[data-has-pending-changes="true"] .sticky-status-bar .changes-badge, [data-theme="dark-high-contrast"] .stock-detail[data-has-pending-changes="true"] .sticky-status-bar .changes-badge { background: var(--color-secondary); color: var(--color-text); } /* G. Hidden variant in dark mode */ [data-theme="dark"] .variant-block[data-visibility="hidden"], [data-theme="dark-high-contrast"] .variant-block[data-visibility="hidden"] { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .variant-block[data-visibility="hidden"] .variant-block-header::before, [data-theme="dark-high-contrast"] .variant-block[data-visibility="hidden"] .variant-block-header::before { background-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); } /* Draft changes variant in dark mode — subtle violet gradient (no left border) */ [data-theme="dark"] .variant-block[data-has-draft-changes="true"], [data-theme="dark-high-contrast"] .variant-block[data-has-draft-changes="true"] { background: linear-gradient(135deg, rgba(92, 67, 244, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(92, 67, 244, 0.2); } [data-theme="dark"] .variant-block[data-has-draft-changes="true"] .variant-block-title::after, [data-theme="dark-high-contrast"] .variant-block[data-has-draft-changes="true"] .variant-block-title::after { background: rgba(0, 255, 203, 0.2); color: rgba(255, 255, 255, 0.8); } /* H. Mode display tints in dark mode */ [data-theme="dark"] .stock-detail[ux-draft-only] .mode-display, [data-theme="dark-high-contrast"] .stock-detail[ux-draft-only] .mode-display { background: rgba(92, 67, 244, 0.05); } [data-theme="dark"] .stock-detail[ux-published] .mode-display, [data-theme="dark-high-contrast"] .stock-detail[ux-published] .mode-display { background: rgba(34, 197, 94, 0.05); } /* I. Photo scope badges in dark mode */ [data-theme="dark"] .photo-card[data-scope="shared"] .scope-badge, [data-theme="dark-high-contrast"] .photo-card[data-scope="shared"] .scope-badge { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; } [data-theme="dark"] .photo-card[data-scope="partial"] .scope-badge, [data-theme="dark-high-contrast"] .photo-card[data-scope="partial"] .scope-badge { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } /* L. Context notes in dark mode Only show prominent styling when the parent card is selected. Mirrors the light mode approach in component-library.css. */ [data-theme="dark"] .context-note, [data-theme="dark-high-contrast"] .context-note { color: var(--color-text-muted); } [data-theme="dark"] .selection-card:has(input:checked) .context-note[data-context="never-published"], [data-theme="dark-high-contrast"] .selection-card:has(input:checked) .context-note[data-context="never-published"] { color: #fbbf24; } [data-theme="dark"] .selection-card:has(input:checked) .context-note[data-context="published-but-hidden"], [data-theme="dark"] .selection-card:has(input:checked) .context-note[data-context="will-hide"], [data-theme="dark-high-contrast"] .selection-card:has(input:checked) .context-note[data-context="published-but-hidden"], [data-theme="dark-high-contrast"] .selection-card:has(input:checked) .context-note[data-context="will-hide"] { color: var(--color-text-light); } [data-theme="dark"] .selection-card:has(input:checked) .context-note[data-context="already-online"], [data-theme="dark"] .selection-card:has(input:checked) .context-note[data-context="already-offline"], [data-theme="dark-high-contrast"] .selection-card:has(input:checked) .context-note[data-context="already-online"], [data-theme="dark-high-contrast"] .selection-card:has(input:checked) .context-note[data-context="already-offline"] { color: var(--color-text-muted); } /* ========================================================================== PRODUCT SUMMARY — Dark Mode State Overrides Companion to application.css Product Summary State Management section. ========================================================================== */ /* Disabled submit button */ [data-theme="dark"] .product-summary .purchase-section[ux-cart-count] .command.cmdSubmit[ux-disabled], [data-theme="dark-high-contrast"] .product-summary .purchase-section[ux-cart-count] .command.cmdSubmit[ux-disabled] { background-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.35); } /* Out of stock: dim the cart option area */ [data-theme="dark"] .product-summary[data-onhand="0"] .cartOption, [data-theme="dark-high-contrast"] .product-summary[data-onhand="0"] .cartOption { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.4); } /* Out of stock: muted price breaks */ [data-theme="dark"] .product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .qty, [data-theme="dark"] .product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .value, [data-theme="dark-high-contrast"] .product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .qty, [data-theme="dark-high-contrast"] .product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .value { color: rgba(255, 255, 255, 0.4); } /* Empty cart background reset for dark mode */ [data-theme="dark"] .product-summary .purchase-section.purchase[ux-cart-count="0"], [data-theme="dark"] .product-summary .purchase-section.offer[ux-cart-count="0"], [data-theme="dark-high-contrast"] .product-summary .purchase-section.purchase[ux-cart-count="0"], [data-theme="dark-high-contrast"] .product-summary .purchase-section.offer[ux-cart-count="0"] { background-color: var(--color-background); color: var(--color-text); } /* Enhanced purchase section — dark mode gradient and border */ [data-theme="dark"] #View_ProductSummary .purchase-section.purchase, [data-theme="dark-high-contrast"] #View_ProductSummary .purchase-section.purchase { background: linear-gradient( 180deg, rgba(var(--color-primary-rgb), 0.04) 0%, rgba(var(--color-primary-rgb), 0.08) 100% ); border-color: rgba(var(--color-primary-rgb), 0.15); } [data-theme="dark"] #View_ProductSummary .purchase-section.offer, [data-theme="dark-high-contrast"] #View_ProductSummary .purchase-section.offer { background: var(--color-surface); border-color: var(--color-border); } /* ========================================================================== STOCK DETAIL — STATE MANAGEMENT (DARK MODE) ========================================================================== Companion to application.css Stock Detail State Management section. ========================================================================== */ /* Live operation notice — dark mode background tint */ [data-theme="dark"] .stock-detail .live-operation-notice, [data-theme="dark-high-contrast"] .stock-detail .live-operation-notice { background: rgba(0, 255, 203, 0.04); border-color: rgba(0, 255, 203, 0.15); } /* Empty summary cards — dark mode surfaces */ [data-theme="dark"] .stock-detail .summary-card.ux-empty, [data-theme="dark-high-contrast"] .stock-detail .summary-card.ux-empty { background: var(--color-surface); border-color: var(--color-border); } /* Card-type empty borders — slightly brighter in dark mode */ [data-theme="dark"] .stock-detail .summary-card.inventory-card.ux-empty, [data-theme="dark-high-contrast"] .stock-detail .summary-card.inventory-card.ux-empty { border-color: rgba(34, 197, 94, 0.35); } [data-theme="dark"] .stock-detail .summary-card.pricing-card.ux-empty, [data-theme="dark-high-contrast"] .stock-detail .summary-card.pricing-card.ux-empty { border-color: rgba(92, 67, 244, 0.35); } [data-theme="dark"] .stock-detail .summary-card.market-card.ux-empty, [data-theme="dark-high-contrast"] .stock-detail .summary-card.market-card.ux-empty { border-color: rgba(251, 191, 36, 0.35); } /* Market card empty CTA — darker text on warning background */ [data-theme="dark"] .stock-detail .summary-card.market-card.ux-empty .command.cmdAdd, [data-theme="dark-high-contrast"] .stock-detail .summary-card.market-card.ux-empty .command.cmdAdd { color: var(--color-text); } /* ============================================ PRODUCT GALLERY — dark mode ============================================ */ [data-theme="dark"] .product-gallery-item, [data-theme="dark-high-contrast"] .product-gallery-item { background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .product-gallery-btn, [data-theme="dark-high-contrast"] .product-gallery-btn { background: rgba(0, 0, 0, 0.5); } [data-theme="dark"] .product-gallery-btn:hover, [data-theme="dark-high-contrast"] .product-gallery-btn:hover { background: rgba(0, 0, 0, 0.7); } [data-theme="dark"] .product-gallery-btn img, [data-theme="dark-high-contrast"] .product-gallery-btn img { filter: invert(1); } [data-theme="dark"] .product-gallery-counter, [data-theme="dark-high-contrast"] .product-gallery-counter { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .product-gallery-dot, [data-theme="dark-high-contrast"] .product-gallery-dot { background: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .product-gallery-dot.active, [data-theme="dark-high-contrast"] .product-gallery-dot.active { background: var(--color-primary); } /* --- Section 73: Product Summary Dark Mode --- */ [data-theme="dark"] .product-summary .content-section.summary, [data-theme="dark-high-contrast"] .product-summary .content-section.summary { border-bottom-color: var(--color-border); } [data-theme="dark"] .product-summary .product-title-section .title, [data-theme="dark-high-contrast"] .product-summary .product-title-section .title { color: var(--color-text); } [data-theme="dark"] .product-summary .content-section.product-details, [data-theme="dark-high-contrast"] .product-summary .content-section.product-details { color: var(--color-text); } /* Facets — selected uses primary fill; light checkmark (icon.selected.png) is visible on --color-primary in both themes, no icon swap needed */ /* Delivery location — swap selected checkmark to light icon on dark surface */ [data-theme="dark"] .product-summary .delivery-location .navigation .tab-item.selected, [data-theme="dark-high-contrast"] .product-summary .delivery-location .navigation .tab-item.selected { background-image: url("/images/skin/icon.selected.png"); } /* Purchase section — swap delete icon for light variant on dark surface */ [data-theme="dark"] .product-summary .purchase-section .commands .cmdRemove, [data-theme="dark-high-contrast"] .product-summary .purchase-section .commands .cmdRemove { background-image: url("/images/skin/icon-delete-dark@2x.png"); } /* Step 9: Emoji → SVG dark mode — invert black icons for dark backgrounds */ [data-theme="dark"] .product-mini-stats .mini-stat .icon, [data-theme="dark-high-contrast"] .product-mini-stats .mini-stat .icon { filter: brightness(0) invert(1); } [data-theme="dark"] .search-detail .related-product-item .social-watch-toggle .icon, [data-theme="dark-high-contrast"] .search-detail .related-product-item .social-watch-toggle .icon { filter: brightness(0) invert(1); } /* Seller info card icons use primary-colored SVGs — no dark mode override needed */ /* Step 11: Added-to-cart checkout group icon — invert for dark backgrounds */ [data-theme="dark"] #View_ProductSummary .content.added .checkout-group .group-type .icon, [data-theme="dark-high-contrast"] #View_ProductSummary .content.added .checkout-group .group-type .icon { filter: brightness(0) invert(1); } /* Added-to-cart card backgrounds for dark mode */ [data-theme="dark"] #View_ProductSummary .content.added .added-item-card, [data-theme="dark"] #View_ProductSummary .content.added .checkout-group, [data-theme="dark-high-contrast"] #View_ProductSummary .content.added .added-item-card, [data-theme="dark-high-contrast"] #View_ProductSummary .content.added .checkout-group { background: var(--color-surface); border-color: var(--color-border); } /* ========================================================================== CART PAGE — Dark Mode ========================================================================== */ /* Cart item options icon — invert for dark backgrounds */ [data-theme="dark"] .cart-item-options .icon, [data-theme="dark-high-contrast"] .cart-item-options .icon { filter: brightness(0) invert(1); } /* Cart group card backgrounds */ [data-theme="dark"] .cart-group, [data-theme="dark-high-contrast"] .cart-group { background: var(--color-surface); border-color: var(--color-border); } /* Cart group header border */ [data-theme="dark"] .cart-group-header, [data-theme="dark-high-contrast"] .cart-group-header { border-bottom-color: var(--color-border); } /* Cart item borders */ [data-theme="dark"] .cart-item, [data-theme="dark-high-contrast"] .cart-item { border-bottom-color: var(--color-border); } /* ========================================================================== AREA 3: LISTING DIALOG ICON DARK MODE OVERRIDES ========================================================================== */ /* Variant toggle — invert for dark backgrounds */ [data-theme="dark"] #Interactions .view[ux-change-form] .cmdVariant, [data-theme="dark-high-contrast"] #Interactions .view[ux-change-form] .cmdVariant { filter: brightness(0) invert(1); } /* Listing Generated — sparks and label icons are primary-colored, no change needed */ /* Publish toggle — invert off state, muted state keeps light look */ [data-theme="dark"] #View_ListingManager .variant .cmdPublish::after, [data-theme="dark-high-contrast"] #View_ListingManager .variant .cmdPublish::after { filter: brightness(0) invert(1); } /* ========================================================================== Section 74: Value Card — Dark Mode ========================================================================== */ [data-theme="dark"] .value-card, [data-theme="dark-high-contrast"] .value-card { background: rgba(255, 255, 255, 0.04); border-color: var(--color-border); } /* ========================================================================== Section 75: KV Row — Dark Mode ========================================================================== */ [data-theme="dark"] .kv-row.final-total, [data-theme="dark-high-contrast"] .kv-row.final-total { border-top-color: var(--color-border); } /* ========================================================================== Section 76: Chat Messaging — Dark Mode ========================================================================== */ [data-theme="dark"] .chat-time-header .message .time, [data-theme="dark-high-contrast"] .chat-time-header .message .time { background: rgba(255, 255, 255, 0.06); } /* Incoming bubble — slightly lighter dark surface */ [data-theme="dark"] .chat-post[post-direction="in"] .chat-bubble, [data-theme="dark-high-contrast"] .chat-post[post-direction="in"] .chat-bubble { background: rgba(255, 255, 255, 0.08); color: var(--color-text); } /* Outgoing bubble — primary stays */ [data-theme="dark"] .chat-post[post-direction="out"] .chat-bubble, [data-theme="dark-high-contrast"] .chat-post[post-direction="out"] .chat-bubble { background: var(--color-primary); color: var(--color-white); } /* Compose form border */ [data-theme="dark"] .chat-form, [data-theme="dark-high-contrast"] .chat-form { border-top-color: var(--color-border); } [data-theme="dark"] .chat-textarea textarea, [data-theme="dark-high-contrast"] .chat-textarea textarea { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .chat-textarea textarea:focus, [data-theme="dark-high-contrast"] .chat-textarea textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.2); } /* ========================================================================== Section 54: Inbox Item — Dark Mode ========================================================================== */ /* Card background + border */ [data-theme="dark"] .inbox-item, [data-theme="dark-high-contrast"] .inbox-item { background: var(--color-surface); border-color: var(--color-border); } /* Unread gradient overlay */ [data-theme="dark"] .inbox-item[data-new-message], [data-theme="dark-high-contrast"] .inbox-item[data-new-message] { background: linear-gradient(135deg, rgba(92, 67, 244, 0.12) 0%, var(--color-surface) 100%); } /* Footer background — gradient matching listing cards */ [data-theme="dark"] .inbox-item .inbox-footer, [data-theme="dark-high-contrast"] .inbox-item .inbox-footer { background: linear-gradient(180deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.06) 100%); border-top-color: var(--color-border); } /* Type icons — invert for dark backgrounds */ [data-theme="dark"] .inbox-item .inbox-type .type-icon, [data-theme="dark-high-contrast"] .inbox-item .inbox-type .type-icon { filter: brightness(0) invert(1); opacity: 0.8; } /* Legacy data-status dark overrides removed — class-based variants (.status-pending, etc.) handle dark mode via Section 11B dark overrides. */ /* CTA button — solid with subtle shadow, fills primary on hover */ [data-theme="dark"] .inbox-item .inbox-cta .command, [data-theme="dark-high-contrast"] .inbox-item .inbox-cta .command { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .inbox-item .inbox-cta .command:hover, [data-theme="dark-high-contrast"] .inbox-item .inbox-cta .command:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== 83. Schedule Table — Dark Mode ========================================================================== */ [data-theme="dark"] .schedule-table, [data-theme="dark-high-contrast"] .schedule-table { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .schedule-day[data-empty], [data-theme="dark-high-contrast"] .schedule-day[data-empty] { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .schedule-label, [data-theme="dark-high-contrast"] .schedule-label { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .schedule-time, [data-theme="dark-high-contrast"] .schedule-time { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .schedule-day[data-empty] .schedule-time, [data-theme="dark-high-contrast"] .schedule-day[data-empty] .schedule-time { color: rgba(255, 255, 255, 0.35); } /* ========================================================================== 85. Checkout & Order Layout — Dark Mode ========================================================================== */ /* Cart Item (Photo Thumbnail) */ [data-theme="dark"] .checkout-cart-item, [data-theme="dark-high-contrast"] .checkout-cart-item { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border: 1px solid var(--color-border); } /* Quantity Badge - keep primary color in dark mode */ [data-theme="dark"] .qty-badge, [data-theme="dark-high-contrast"] .qty-badge { background: var(--color-primary); color: white; } /* Order Summary Card */ [data-theme="dark"] .order-summary, [data-theme="dark-high-contrast"] .order-summary { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .order-summary .summary-total, [data-theme="dark-high-contrast"] .order-summary .summary-total { border-top-color: var(--color-border); } /* Mobile Order Actions */ [data-theme="dark"] .mobile-order-actions, [data-theme="dark-high-contrast"] .mobile-order-actions { background: var(--color-surface); border-top-color: var(--color-border); } /* ========================================================================== 86. Footers & Sticky Action Bars — Dark Mode ========================================================================== */ /* Sticky Action Bar */ [data-theme="dark"] .sticky-action-bar, [data-theme="dark-high-contrast"] .sticky-action-bar { background: var(--color-surface); border-top-color: var(--color-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); } /* Site Footer */ [data-theme="dark"] .site-footer, [data-theme="dark-high-contrast"] .site-footer { background: var(--color-surface); border-top-color: var(--color-border); } [data-theme="dark"] .site-footer .copyright, [data-theme="dark-high-contrast"] .site-footer .copyright { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .site-footer .copyright .name, [data-theme="dark-high-contrast"] .site-footer .copyright .name { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .site-footer .footer-links a, [data-theme="dark-high-contrast"] .site-footer .footer-links a { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .site-footer .footer-links a:hover, [data-theme="dark-high-contrast"] .site-footer .footer-links a:hover { color: var(--color-primary-light, #a5b4fc); } /* ========================================================================== Section 87. Settings Layout — Dark Mode ========================================================================== */ /* Settings Board */ [data-theme="dark"] .settings-board, [data-theme="dark-high-contrast"] .settings-board { background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] .settings-board-title, [data-theme="dark-high-contrast"] .settings-board-title { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .settings-board-help, [data-theme="dark-high-contrast"] .settings-board-help { color: rgba(255, 255, 255, 0.6); border-left-color: rgba(168, 148, 255, 0.3); } [data-theme="dark"] .settings-board-help p:first-child, [data-theme="dark-high-contrast"] .settings-board-help p:first-child { color: rgba(255, 255, 255, 0.75); } /* Settings page warm canvas — dark mode version */ [data-theme="dark"] .settings-page, [data-theme="dark"] [page-name="Account"] .content, [data-theme="dark-high-contrast"] .settings-page, [data-theme="dark-high-contrast"] [page-name="Account"] .content { background: linear-gradient( 180deg, rgba(168, 148, 255, 0.06) 0%, rgba(168, 148, 255, 0.03) 30%, rgba(0, 255, 203, 0.02) 70%, rgba(168, 148, 255, 0.02) 100% ); } [data-theme="dark"] .settings-page::before, [data-theme="dark"] [page-name="Account"] .content::before, [data-theme="dark-high-contrast"] .settings-page::before, [data-theme="dark-high-contrast"] [page-name="Account"] .content::before { background-image: radial-gradient(circle at 20% 20%, rgba(168, 148, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 255, 203, 0.03) 0%, transparent 50%); } /* Settings Cards */ [data-theme="dark"] .settings-card, [data-theme="dark-high-contrast"] .settings-card { background: linear-gradient(160deg, rgba(30, 28, 45, 0.95) 0%, rgba(20, 18, 35, 0.95) 100%); border-color: rgba(168, 148, 255, 0.12); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .settings-card:hover, [data-theme="dark-high-contrast"] .settings-card:hover { border-color: rgba(168, 148, 255, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(168, 148, 255, 0.1); transform: translateY(-3px); } [data-theme="dark"] .settings-card[ux-empty], [data-theme="dark-high-contrast"] .settings-card[ux-empty] { background: linear-gradient(135deg, rgba(168, 148, 255, 0.06) 0%, rgba(0, 255, 203, 0.03) 50%, rgba(20, 18, 35, 0.9) 100%); border: 2px dashed rgba(168, 148, 255, 0.3); box-shadow: inset 0 0 20px rgba(168, 148, 255, 0.05); } [data-theme="dark"] .settings-card[ux-empty]:hover, [data-theme="dark-high-contrast"] .settings-card[ux-empty]:hover { border-color: var(--color-primary-light, #a5b4fc); background: linear-gradient(135deg, rgba(168, 148, 255, 0.1) 0%, rgba(0, 255, 203, 0.05) 50%, rgba(20, 18, 35, 0.9) 100%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 148, 255, 0.08); } [data-theme="dark"] .settings-card[ux-empty]::after, [data-theme="dark-high-contrast"] .settings-card[ux-empty]::after { background: linear-gradient( 90deg, transparent, rgba(168, 148, 255, 0.08), transparent ); } [data-theme="dark"] .settings-card[ux-needs-action], [data-theme="dark-high-contrast"] .settings-card[ux-needs-action] { border-color: var(--color-warning); background: linear-gradient(160deg, rgba(245, 158, 11, 0.06) 0%, var(--color-surface) 100%); } [data-theme="dark"] .settings-card-header, [data-theme="dark-high-contrast"] .settings-card-header { background: linear-gradient(180deg, rgba(168, 148, 255, 0.06) 0%, transparent 100%); border-bottom-color: rgba(168, 148, 255, 0.1); } [data-theme="dark"] .settings-card-title, [data-theme="dark-high-contrast"] .settings-card-title { color: rgba(255, 255, 255, 0.95); } [data-theme="dark"] .settings-card-action, [data-theme="dark-high-contrast"] .settings-card-action { color: var(--color-primary-light, #a5b4fc); } [data-theme="dark"] .settings-card-action:hover, [data-theme="dark-high-contrast"] .settings-card-action:hover { background: rgba(165, 180, 252, 0.12); } /* Settings Values */ [data-theme="dark"] .settings-key, [data-theme="dark-high-contrast"] .settings-key { color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .settings-value, [data-theme="dark-high-contrast"] .settings-value { color: rgba(255, 255, 255, 0.9); } /* Settings Empty */ [data-theme="dark"] .settings-empty-text, [data-theme="dark-high-contrast"] .settings-empty-text { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .settings-empty-cta, [data-theme="dark-high-contrast"] .settings-empty-cta { color: var(--color-primary-light, #a5b4fc); } /* Plan Cards */ [data-theme="dark"] .plan-card, [data-theme="dark-high-contrast"] .plan-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .plan-card:hover, [data-theme="dark-high-contrast"] .plan-card:hover { border-color: var(--color-border-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .plan-card.plan-card-current, [data-theme="dark-high-contrast"] .plan-card.plan-card-current { border-color: var(--color-primary-light, #a5b4fc); background: rgba(165, 180, 252, 0.06); } [data-theme="dark"] .plan-card.plan-card-popular, [data-theme="dark-high-contrast"] .plan-card.plan-card-popular { border-color: var(--color-success-light, #86efac); } [data-theme="dark"] .plan-card-header, [data-theme="dark-high-contrast"] .plan-card-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .plan-card-name, [data-theme="dark-high-contrast"] .plan-card-name { color: rgba(255, 255, 255, 0.95); } [data-theme="dark"] .plan-card-price, [data-theme="dark-high-contrast"] .plan-card-price { color: var(--color-primary-light, #a5b4fc); } [data-theme="dark"] .plan-feature, [data-theme="dark-high-contrast"] .plan-feature { border-bottom-color: var(--color-border); } [data-theme="dark"] .plan-feature-name, [data-theme="dark-high-contrast"] .plan-feature-name { color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .plan-feature-value, [data-theme="dark-high-contrast"] .plan-feature-value { color: rgba(255, 255, 255, 0.9); } /* Promotion Cards & Badge Collection */ [data-theme="dark"] .card.promotion-active, [data-theme="dark-high-contrast"] .card.promotion-active { background: linear-gradient(160deg, rgba(34, 197, 94, 0.06) 0%, var(--color-surface) 100%); border-color: rgba(34, 197, 94, 0.2); } [data-theme="dark"] .promotion-end-date, [data-theme="dark-high-contrast"] .promotion-end-date { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .promotion-revert-notice, [data-theme="dark-high-contrast"] .promotion-revert-notice { background: rgba(168, 148, 255, 0.06); color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .badge-item-icon, [data-theme="dark-high-contrast"] .badge-item-icon { background: rgba(168, 148, 255, 0.1); color: var(--color-primary-light, #a5b4fc); } [data-theme="dark"] .badge-item:hover .badge-item-icon, [data-theme="dark-high-contrast"] .badge-item:hover .badge-item-icon { background: rgba(168, 148, 255, 0.15); } [data-theme="dark"] .badge-item-name, [data-theme="dark-high-contrast"] .badge-item-name { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .badge-item.badge-pinned .badge-item-icon, [data-theme="dark-high-contrast"] .badge-item.badge-pinned .badge-item-icon { border-color: rgba(168, 148, 255, 0.25); } [data-theme="dark"] .seller-badge-pill, [data-theme="dark-high-contrast"] .seller-badge-pill { background: var(--color-primary-lighter); border-color: var(--color-primary-light); } [data-theme="dark"] .seller-badge-pill .icon-svg, [data-theme="dark-high-contrast"] .seller-badge-pill .icon-svg { color: var(--color-badge-text-primary); } [data-theme="dark"] .seller-badge-pill:hover, [data-theme="dark-high-contrast"] .seller-badge-pill:hover { background: var(--color-badge-bg-primary); } [data-theme="dark"] .badge-toast, [data-theme="dark-high-contrast"] .badge-toast { background: var(--color-surface); border-color: var(--color-primary-light); } [data-theme="dark"] .badge-toast-icon .icon-svg, [data-theme="dark-high-contrast"] .badge-toast-icon .icon-svg { background: var(--color-badge-bg-primary); color: var(--color-badge-text-primary); } /* Schedule Table */ [data-theme="dark"] .schedule-day, [data-theme="dark-high-contrast"] .schedule-day { border-bottom-color: var(--color-border); } [data-theme="dark"] .schedule-label, [data-theme="dark-high-contrast"] .schedule-label { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .schedule-time, [data-theme="dark-high-contrast"] .schedule-time { color: rgba(255, 255, 255, 0.6); } /* Location Notes & Callouts */ [data-theme="dark"] .location-notes, [data-theme="dark-high-contrast"] .location-notes, [data-theme="dark"] .callout.callout-info, [data-theme="dark-high-contrast"] .callout.callout-info { background: linear-gradient(135deg, rgba(168, 148, 255, 0.1) 0%, rgba(0, 255, 203, 0.05) 100%); border-color: rgba(168, 148, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .callout.callout-warning, [data-theme="dark-high-contrast"] .callout.callout-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%); border-color: rgba(245, 158, 11, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .location-notes .note-icon, [data-theme="dark-high-contrast"] .location-notes .note-icon, [data-theme="dark"] .callout.callout-info .callout-icon, [data-theme="dark-high-contrast"] .callout.callout-info .callout-icon { background: rgba(168, 148, 255, 0.2); color: #a5b4fc; } [data-theme="dark"] .callout.callout-warning .callout-icon, [data-theme="dark-high-contrast"] .callout.callout-warning .callout-icon { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } [data-theme="dark"] .location-notes .note-text, [data-theme="dark-high-contrast"] .location-notes .note-text, [data-theme="dark"] .callout-content, [data-theme="dark-high-contrast"] .callout-content { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .location-notes .note-text p strong, [data-theme="dark-high-contrast"] .location-notes .note-text p strong, [data-theme="dark"] .callout-content p strong, [data-theme="dark-high-contrast"] .callout-content p strong { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .callout.callout-warning .callout-content p strong, [data-theme="dark-high-contrast"] .callout.callout-warning .callout-content p strong { color: #fcd34d; } /* Scrollbar styling for settings cards */ [data-theme="dark"] .settings-cards::-webkit-scrollbar-track, [data-theme="dark-high-contrast"] .settings-cards::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .settings-cards::-webkit-scrollbar-thumb, [data-theme="dark-high-contrast"] .settings-cards::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .settings-cards::-webkit-scrollbar-thumb:hover, [data-theme="dark-high-contrast"] .settings-cards::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ========================================================================== CREATE LISTING DIALOG - DARK MODE ========================================================================== */ /* --- Photo Options (Upload/Camera cards) --- */ [data-theme="dark"] .create-listing-options .photo-option, [data-theme="dark-high-contrast"] .create-listing-options .photo-option { background: linear-gradient( 165deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.06) 100% ); border-color: var(--color-border); } [data-theme="dark"] .create-listing-options .photo-option:hover, [data-theme="dark-high-contrast"] .create-listing-options .photo-option:hover { border-color: var(--color-primary); background: linear-gradient( 165deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.1) 50%, rgba(var(--color-secondary-rgb), 0.05) 100% ); box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.2), 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(var(--color-primary-rgb), 0.12); } /* Shimmer effect in dark mode */ [data-theme="dark"] .create-listing-options .photo-option::before, [data-theme="dark-high-contrast"] .create-listing-options .photo-option::before { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100% ); } [data-theme="dark"] .create-listing-options .option-icon-wrapper, [data-theme="dark-high-contrast"] .create-listing-options .option-icon-wrapper { background: linear-gradient( 145deg, rgba(var(--color-primary-rgb), 0.25) 0%, rgba(var(--color-secondary-rgb), 0.12) 100% ); border-color: rgba(var(--color-primary-rgb), 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-theme="dark"] .create-listing-options .photo-option:hover .option-icon-wrapper, [data-theme="dark-high-contrast"] .create-listing-options .photo-option:hover .option-icon-wrapper { background: linear-gradient( 145deg, rgba(var(--color-primary-rgb), 0.35) 0%, rgba(var(--color-secondary-rgb), 0.18) 100% ); } [data-theme="dark"] .create-listing-options .option-benefits li::before, [data-theme="dark-high-contrast"] .create-listing-options .option-benefits li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } [data-theme="dark"] .create-listing-options .upload-zone, [data-theme="dark-high-contrast"] .create-listing-options .upload-zone { border-color: rgba(var(--color-primary-rgb), 0.4); background: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-secondary-rgb), 0.04) 100% ); } [data-theme="dark"] .create-listing-options .upload-zone:hover, [data-theme="dark-high-contrast"] .create-listing-options .upload-zone:hover, [data-theme="dark"] .create-listing-options .upload-zone:focus, [data-theme="dark-high-contrast"] .create-listing-options .upload-zone:focus { background: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-secondary-rgb), 0.08) 100% ); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2); } [data-theme="dark"] .create-listing-tip.notice-banner, [data-theme="dark-high-contrast"] .create-listing-tip.notice-banner { background: linear-gradient( 90deg, rgba(var(--color-success-rgb), 0.12) 0%, rgba(var(--color-success-rgb), 0.05) 100% ); border-color: rgba(var(--color-success-rgb), 0.25); } /* Hero illustration glow */ [data-theme="dark"] .create-listing-hero .hero-illustration::after, [data-theme="dark-high-contrast"] .create-listing-hero .hero-illustration::after { background: radial-gradient( ellipse at center, rgba(var(--color-primary-rgb), 0.25) 0%, transparent 70% ); } /* --- Analysis Error State --- */ [data-theme="dark"] .analysis-error-card, [data-theme="dark-high-contrast"] .analysis-error-card { background: linear-gradient( 165deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.06) 100% ); border-color: var(--color-border); } [data-theme="dark"] .analysis-error .error-icon-wrapper, [data-theme="dark-high-contrast"] .analysis-error .error-icon-wrapper { background: linear-gradient( 145deg, rgba(var(--color-warning-rgb), 0.2) 0%, rgba(var(--color-warning-rgb), 0.1) 100% ); } [data-theme="dark"] .analysis-error .error-suggestions, [data-theme="dark-high-contrast"] .analysis-error .error-suggestions { background: rgba(var(--color-primary-rgb), 0.06); } [data-theme="dark"] .analysis-error .error-icon-uncertain, [data-theme="dark-high-contrast"] .analysis-error .error-icon-uncertain { background: linear-gradient( 145deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(var(--color-primary-rgb), 0.1) 100% ); } /* Suggestion icons in dark mode */ [data-theme="dark"] .analysis-error .suggestion-icon, [data-theme="dark-high-contrast"] .analysis-error .suggestion-icon { opacity: 0.9; filter: invert(1) brightness(0.85); } /* --- Busy/Loading States --- */ [data-theme="dark"] #View_CreateListing > .dialog-loading, [data-theme="dark-high-contrast"] #View_CreateListing > .dialog-loading { background: linear-gradient( 180deg, rgba(var(--color-background-rgb), 0.97) 0%, rgba(var(--color-primary-rgb), 0.04) 100% ); } [data-theme="dark"] #View_CreateListing .busy-content .photo-preview, [data-theme="dark-high-contrast"] #View_CreateListing .busy-content .photo-preview { background: linear-gradient( 135deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.1) 100% ); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(var(--color-primary-rgb), 0.1); } [data-theme="dark"] #View_CreateListing .busy-content .photo-preview::after, [data-theme="dark-high-contrast"] #View_CreateListing .busy-content .photo-preview::after { border-color: rgba(var(--color-primary-rgb), 0.25); } /* --- Category Cards --- */ [data-theme="dark"] .category-card, [data-theme="dark-high-contrast"] .category-card { background: linear-gradient( 165deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.04) 100% ); border-color: var(--color-border); } [data-theme="dark"] .category-card:hover, [data-theme="dark-high-contrast"] .category-card:hover { background: linear-gradient( 165deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.08) 100% ); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(var(--color-primary-rgb), 0.1); } [data-theme="dark"] .category-card.selected, [data-theme="dark-high-contrast"] .category-card.selected { background: linear-gradient( 165deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.12) 100% ); } [data-theme="dark"] .category-card .card-thumbnail, [data-theme="dark-high-contrast"] .category-card .card-thumbnail { background: linear-gradient( 135deg, var(--color-background) 0%, rgba(var(--color-primary-rgb), 0.06) 100% ); } /* Confidence badges */ [data-theme="dark"] .category-card .confidence-badge.high, [data-theme="dark-high-contrast"] .category-card .confidence-badge.high { background: rgba(34, 197, 94, 0.2); color: var(--color-success-light, #4ade80); } [data-theme="dark"] .category-card .confidence-badge.medium, [data-theme="dark-high-contrast"] .category-card .confidence-badge.medium { background: rgba(245, 158, 11, 0.2); color: var(--color-warning-light, #fbbf24); } /* Fallback option */ [data-theme="dark"] .category-card.fallback-option, [data-theme="dark-high-contrast"] .category-card.fallback-option { border-color: rgba(var(--color-primary-rgb), 0.35); background: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.06) 0%, rgba(var(--color-secondary-rgb), 0.03) 100% ); } [data-theme="dark"] .category-card.fallback-option .card-thumbnail.fallback, [data-theme="dark-high-contrast"] .category-card.fallback-option .card-thumbnail.fallback { background: linear-gradient( 145deg, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(var(--color-primary-rgb), 0.08) 100% ); } [data-theme="dark"] .category-card.fallback-option .card-thumbnail.fallback .fallback-icon, [data-theme="dark-high-contrast"] .category-card.fallback-option .card-thumbnail.fallback .fallback-icon { color: var(--color-primary-light, #8b7cf7); } /* ============================================================================= View_AttributeList - Dark Mode (minimal overrides) ============================================================================= */ [data-theme="dark"] #View_AttributeList .variant-section .form-section-header, [data-theme="dark-high-contrast"] #View_AttributeList .variant-section .form-section-header { background-color: rgba(var(--color-primary-rgb), 0.15); } [data-theme="dark"] #View_AttributeList .variantSelection, [data-theme="dark-high-contrast"] #View_AttributeList .variantSelection { background-color: rgba(var(--color-primary-rgb), 0.12); border-color: rgba(var(--color-primary-rgb), 0.3); } /* ========================================================================== FIX 1: Footer copyright text The footer uses .footer #Copyright, not .site-footer .copyright ========================================================================== */ [data-theme="dark"] .footer #Copyright, [data-theme="dark-high-contrast"] .footer #Copyright { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .footer #Copyright .copyright .name, [data-theme="dark-high-contrast"] .footer #Copyright .copyright .name { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .footer #Copyright a, [data-theme="dark-high-contrast"] .footer #Copyright a { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .footer #Copyright a:hover, [data-theme="dark-high-contrast"] .footer #Copyright a:hover { color: rgba(255, 255, 255, 0.8); } /* ========================================================================== FIX 2: Dialog/drawer backgrounds application.css sets a hardcoded white gradient on #Interactions .view[ux-change-form]. Override with dark surface gradient for dark mode. ========================================================================== */ [data-theme="dark"] #Interactions .view[ux-change-form], [data-theme="dark-high-contrast"] #Interactions .view[ux-change-form] { background-image: linear-gradient(125deg, var(--color-background) 30%, var(--color-surface) 95%, var(--color-background)); } /* ========================================================================== FIX 3: Double bottom border on selected tabs .tab-nav .tab-item.selected has border-bottom AND .tab-item::after pseudo-element. Remove the ::after when inside .tab-nav since it already has border-bottom. ========================================================================== */ .tab-nav .tab-item::after { display: none; } /* ========================================================================== FIX 4: Thread order summary card The order rollup summary and product items need dark backgrounds. ========================================================================== */ [data-theme="dark"] .thread-order-card .order-rollup .order-summary, [data-theme="dark-high-contrast"] .thread-order-card .order-rollup .order-summary { background: var(--color-surface-elevated); color: var(--color-text); } [data-theme="dark"] .thread-order-card .order-rollup, [data-theme="dark-high-contrast"] .thread-order-card .order-rollup { background: var(--color-surface); color: var(--color-text); } [data-theme="dark"] .thread-order-card, [data-theme="dark-high-contrast"] .thread-order-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .thread-order-card .expand-toggle, [data-theme="dark-high-contrast"] .thread-order-card .expand-toggle { background: var(--color-surface-elevated); color: var(--color-text-muted); border-color: var(--color-border); } /* ========================================================================== FIX 5: Logo — swap to white version in dark mode ========================================================================== */ [data-theme="dark"] .app-header-logo img, [data-theme="dark-high-contrast"] .app-header-logo img { content: url('/images/logo-white@2x.png'); } /* ========================================================================== FIX 6: Activity search pills / status badges — dark mode refinements Boost tint opacity so variant backgrounds are visible on dark surfaces. Ensure dot + text colors are correct for each variant. ========================================================================== */ [data-theme="dark"] .status-badge.status-pending, [data-theme="dark"] .status-badge.status-draft, [data-theme="dark-high-contrast"] .status-badge.status-pending, [data-theme="dark-high-contrast"] .status-badge.status-draft { background: var(--color-badge-bg-primary); color: var(--color-badge-text-primary); } [data-theme="dark"] .status-badge.status-complete, [data-theme="dark"] .status-badge.status-live, [data-theme="dark"] .status-badge.status-success, [data-theme="dark-high-contrast"] .status-badge.status-complete, [data-theme="dark-high-contrast"] .status-badge.status-live, [data-theme="dark-high-contrast"] .status-badge.status-success { background: var(--color-badge-bg-success); color: var(--color-badge-text-success); } [data-theme="dark"] .status-badge.status-cancelled, [data-theme="dark"] .status-badge.status-error, [data-theme="dark-high-contrast"] .status-badge.status-cancelled, [data-theme="dark-high-contrast"] .status-badge.status-error { background: var(--color-badge-bg-error); color: var(--color-badge-text-error); } [data-theme="dark"] .status-badge.status-warning, [data-theme="dark-high-contrast"] .status-badge.status-warning { background: var(--color-badge-bg-warning); color: var(--color-badge-text-warning); } [data-theme="dark"] .status-badge.status-info, [data-theme="dark"] .status-badge.status-partial, [data-theme="dark-high-contrast"] .status-badge.status-info, [data-theme="dark-high-contrast"] .status-badge.status-partial { background: var(--color-badge-bg-info); color: var(--color-badge-text-info); } /* ========================================================================== FIX 7: Filters dialog and other dialogs with light body Ensure all dialog content areas respect dark backgrounds ========================================================================== */ [data-theme="dark"] .dialog-body, [data-theme="dark-high-contrast"] .dialog-body { background: var(--color-background); color: var(--color-text); } [data-theme="dark"] .dialog-header, [data-theme="dark-high-contrast"] .dialog-header { background: var(--color-surface); color: var(--color-text); border-bottom-color: var(--color-border); } [data-theme="dark"] .dialog-footer, [data-theme="dark-high-contrast"] .dialog-footer { background: var(--color-surface); color: var(--color-text); border-top-color: var(--color-border); } /* ========================================================================== FIX 8: Horizontal scroll gradient (browse-cards) — dark fade The base uses white→white gradient; override to dark background color. ========================================================================== */ [data-theme="dark"] .browse-cards::after, [data-theme="dark-high-contrast"] .browse-cards::after { background-image: linear-gradient(to right, rgba(18, 18, 28, 0), rgba(18, 18, 28, 0.9)); } /* ========================================================================== FIX 9: UserOptions menu icons — invert black SVGs to white All icons reference *-black.svg; filter flips them for dark backgrounds. ========================================================================== */ [data-theme="dark"] #View_UserOptions .icon, [data-theme="dark-high-contrast"] #View_UserOptions .icon { filter: brightness(0) invert(1); } /* ========================================================================== FIX 10: Sticky header (scrolledBack) — logo, cart, search on dark mode When the homepage transparent header scrolls back, it reverts to opaque. In dark mode the opaque bg is dark, so logo/cart need white variants. ========================================================================== */ /* Sticky header background should use dark surface */ [data-theme="dark"] body.scrolledBack .app-header, [data-theme="dark-high-contrast"] body.scrolledBack .app-header { background: var(--color-background); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] body.scrolledBack .app-header-transparent, [data-theme="dark-high-contrast"] body.scrolledBack .app-header-transparent { background: var(--color-background); } /* Keep white logo on scrolled-back header in dark mode (override the revert to logo@2x) */ [data-theme="dark"] #Body[page-name="Index"].scrolledBack #Header .container #Logo img, [data-theme="dark-high-contrast"] #Body[page-name="Index"].scrolledBack #Header .container #Logo img { content: url('/images/logo-white@2x.png'); } /* Keep white cart icon on scrolled-back header in dark mode */ [data-theme="dark"] #Body.scrolledBack[page-name="Index"] #Nav_Store #Ni_Cart .name, [data-theme="dark-high-contrast"] #Body.scrolledBack[page-name="Index"] #Nav_Store #Ni_Cart .name { background-image: url("/images/icon/cart-white.svg"); } /* Non-homepage: cart icon should also be white in dark mode */ [data-theme="dark"] #Nav_Store #Ni_Cart .name, [data-theme="dark-high-contrast"] #Nav_Store #Ni_Cart .name { background-image: url("/images/icon/cart-white.svg"); } /* Scrolled-back search clear button should use white icon */ [data-theme="dark"] body.scrolledBack .app-header-transparent .app-header-search-clear, [data-theme="dark-high-contrast"] body.scrolledBack .app-header-transparent .app-header-search-clear { background-image: url("/images/icon/close-white.svg"); background-color: var(--color-surface-elevated); } /* Scrolled-back search magnifying glass icon — keep inverted for dark */ [data-theme="dark"] body.scrolledBack .app-header-transparent .app-header-search::before, [data-theme="dark-high-contrast"] body.scrolledBack .app-header-transparent .app-header-search::before { filter: brightness(0) invert(1); } /* Scrolled-back nav items should be light */ [data-theme="dark"] body.scrolledBack .app-header-transparent .app-header-action, [data-theme="dark-high-contrast"] body.scrolledBack .app-header-transparent .app-header-action { color: var(--color-text); } /* ========================================================================== FIX 11: Homepage category card descriptions — lighter text ========================================================================== */ [data-theme="dark"] .image-card-subtitle, [data-theme="dark-high-contrast"] .image-card-subtitle { color: rgba(255, 255, 255, 0.85); } /* ========================================================================== FIX 12: Collections "Explore All" button — more visible on dark bg btn-cta-secondary is glass-on-dark, but dark page bg makes it too subtle. ========================================================================== */ [data-theme="dark"] .collections-cta .command.btn-cta-secondary, [data-theme="dark-high-contrast"] .collections-cta .command.btn-cta-secondary { background: rgba(92, 67, 244, 0.15); border-color: rgba(92, 67, 244, 0.5); color: var(--color-text); } [data-theme="dark"] .collections-cta .command.btn-cta-secondary:hover, [data-theme="dark-high-contrast"] .collections-cta .command.btn-cta-secondary:hover { background: rgba(92, 67, 244, 0.25); border-color: rgba(92, 67, 244, 0.7); } /* ========================================================================== FIX 13: Section headings — .section-title color The base .section-title uses var(--color-text) which works, but some section-specific overrides set color: var(--color-background) for "light text on dark bg" — that flips to dark-on-dark in dark mode. ========================================================================== */ /* Testimonials section already has dark bg, text uses --color-background which flips */ [data-theme="dark"] .testimonials-section, [data-theme="dark-high-contrast"] .testimonials-section { color: rgb(240, 240, 245); } [data-theme="dark"] .testimonials-section .section-title, [data-theme="dark-high-contrast"] .testimonials-section .section-title { color: rgb(240, 240, 245); } /* ========================================================================== FIX 14: CTA "Ready to Join" section — text colors .cta-section sets color: var(--color-background) which flips to dark. Override to keep light text on the gradient background. ========================================================================== */ [data-theme="dark"] .cta-section, [data-theme="dark-high-contrast"] .cta-section { color: rgb(240, 240, 245); } [data-theme="dark"] .cta-title, [data-theme="dark-high-contrast"] .cta-title { color: rgb(240, 240, 245); } [data-theme="dark"] .cta-subtitle, [data-theme="dark-high-contrast"] .cta-subtitle { color: rgba(240, 240, 245, 0.9); } [data-theme="dark"] .cta-note, [data-theme="dark-high-contrast"] .cta-note { color: rgba(240, 240, 245, 0.7); } [data-theme="dark"] .cta-trust-badges span, [data-theme="dark-high-contrast"] .cta-trust-badges span { color: rgba(240, 240, 245, 0.8); } /* btn-cta-secondary on dark-mode pages (not inside .cta-section which already has dark bg) */ [data-theme="dark"] .cta-section .command.btn-cta-secondary, [data-theme="dark-high-contrast"] .cta-section .command.btn-cta-secondary { background: rgba(255, 255, 255, 0.15); color: rgb(240, 240, 245); border-color: rgba(255, 255, 255, 0.4); } /* ========================================================================== FIX 15: Bottom nav icons — invert for dark mode ========================================================================== */ [data-theme="dark"] .bottom-nav-icon, [data-theme="dark-high-contrast"] .bottom-nav-icon { filter: brightness(0) invert(1); } /* ========================================================================== FIX 16: Dialog busy/loading overlay — stay dark in dark mode .dialog-loading base has white bg; .busy-overlay also white. Ensure loading states use dark backgrounds. ========================================================================== */ [data-theme="dark"] .busy-overlay, [data-theme="dark-high-contrast"] .busy-overlay { background: rgba(0, 0, 0, 0.8); } /* ========================================================================== FIX 17: Feature badges — text color uses var(--color-background) which flips dark. Force white text on the gradient badge background. ========================================================================== */ [data-theme="dark"] .feature-badge, [data-theme="dark-high-contrast"] .feature-badge { color: #fff; } /* ========================================================================== FIX 18: CTA primary button — text uses var(--color-background) which flips dark. Force white text on the solid blue button. ========================================================================== */ [data-theme="dark"] .command.btn-cta-primary, [data-theme="dark-high-contrast"] .command.btn-cta-primary { color: #fff; } /* ========================================================================== FIX 19: Plan comparison cards — dark mode Base styles use hardcoded rgba(30,25,55,...) which is invisible on dark bg. ========================================================================== */ [data-theme="dark"] .plan-comparison .card-title, [data-theme="dark-high-contrast"] .plan-comparison .card-title { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .plan-comparison .card-description, [data-theme="dark-high-contrast"] .plan-comparison .card-description { color: var(--color-primary-light-solid, #a78bfa); } [data-theme="dark"] .card.current-plan .card-description, [data-theme="dark-high-contrast"] .card.current-plan .card-description { color: rgba(255, 255, 255, 0.5); } /* Feature checklist items */ [data-theme="dark"] .plan-features .checklist-item.completed, [data-theme="dark-high-contrast"] .plan-features .checklist-item.completed { background: rgba(92, 67, 244, 0.1); border-color: rgba(92, 67, 244, 0.2); } [data-theme="dark"] .plan-features .checklist-item.completed .checklist-content, [data-theme="dark"] .plan-features .checklist-item.completed .checklist-title, [data-theme="dark-high-contrast"] .plan-features .checklist-item.completed .checklist-content, [data-theme="dark-high-contrast"] .plan-features .checklist-item.completed .checklist-title { color: rgba(255, 255, 255, 0.85); } /* Current plan — more muted features */ [data-theme="dark"] .card.current-plan .plan-features .checklist-item.completed, [data-theme="dark-high-contrast"] .card.current-plan .plan-features .checklist-item.completed { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .card.current-plan .plan-features .checklist-item.completed .checklist-status, [data-theme="dark-high-contrast"] .card.current-plan .plan-features .checklist-item.completed .checklist-status { color: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .card.current-plan .plan-features .checklist-item.completed .checklist-content, [data-theme="dark-high-contrast"] .card.current-plan .plan-features .checklist-item.completed .checklist-content { color: rgba(255, 255, 255, 0.6); } /* Card meta badge */ [data-theme="dark"] .plan-comparison .card-meta, [data-theme="dark-high-contrast"] .plan-comparison .card-meta { background: rgba(92, 67, 244, 0.15); color: var(--color-badge-text-primary); border-color: rgba(92, 67, 244, 0.25); } /* Plan summary card (payment step) */ [data-theme="dark"] .card.plan-summary .card-title, [data-theme="dark-high-contrast"] .card.plan-summary .card-title { color: rgba(255, 255, 255, 0.9); } /* ========================================================================== FIX 20: Change Summary labels — dark mode Labels use hardcoded rgba(30,25,55,...) which is invisible on dark bg. ========================================================================== */ [data-theme="dark"] .change-summary .form-label, [data-theme="dark-high-contrast"] .change-summary .form-label { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .change-summary .form-static, [data-theme="dark-high-contrast"] .change-summary .form-static { color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .change-summary .form-hint, [data-theme="dark-high-contrast"] .change-summary .form-hint { color: rgba(255, 255, 255, 0.6); } /* ========================================================================== FIX 21: Settings card icons — invert black SVGs for dark mode ========================================================================== */ [data-theme="dark"] .settings-card-title .icon, [data-theme="dark-high-contrast"] .settings-card-title .icon { filter: brightness(0) invert(1); opacity: 0.8; } /* ========================================================================== FIX 22: Settings card action links — brighter for dark mode ========================================================================== */ [data-theme="dark"] .settings-card-action, [data-theme="dark-high-contrast"] .settings-card-action { color: var(--color-primary-light-solid, #a78bfa); }