/* ================================================ LAYER 8: THEMES - Dark Mode Overrides (ITCSS) Modern Theme - Vitrino Real Estate System Uses data-theme attribute on element ================================================ */ [data-theme="dark"], body.dark-theme, .dark-theme { color-scheme: dark; --surface-page: var(--color-slate-950); --surface-card: var(--color-slate-900); --surface-muted: var(--color-slate-800); --surface-accent: rgba(129, 140, 248, 0.12); --text-primary: var(--color-slate-50); --text-secondary: var(--color-slate-400); --text-muted: var(--color-slate-500); --border-default: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.32); --interactive-primary: var(--color-indigo-400); --interactive-primary-hover: var(--color-indigo-500); /* Bridge Variables */ --page-bg: #0b0f19; --surface: #131b2e; --surface-elevated: #1a233a; --border-subtle: rgba(148, 163, 184, 0.15); --text-tertiary: #64748b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.45); --shadow-brand: 0 12px 30px rgba(99, 102, 241, 0.28); } [data-theme="dark"] .c-card { border-color: var(--border-default); background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); } [data-theme="dark"] .c-input-group { background: var(--surface-card); } [data-theme="dark"] .c-input-group__text { background: var(--surface-muted); border-color: var(--border-default); } [data-theme="dark"] .c-form-control { background: var(--surface-card); color: var(--text-primary); } [data-theme="dark"] .c-table thead th { background: var(--color-slate-800); color: var(--text-secondary); } [data-theme="dark"] .c-table-wrapper { background: var(--surface-card); border-color: var(--border-default); } [data-theme="dark"] .c-card__header, [data-theme="dark"] .c-card__footer { border-color: var(--border-default); } [data-theme="dark"] .c-card__footer { background: var(--color-slate-800); } [data-theme="dark"] .c-dropdown-menu { background: var(--color-slate-900); border-color: var(--border-default); } [data-theme="dark"] .c-dropdown-divider { background: var(--border-default); } [data-theme="dark"] .c-table tbody tr:hover td { background: rgba(99, 102, 241, 0.08); } [data-theme="dark"] .c-btn--secondary { background: var(--color-slate-800); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .c-btn--secondary:hover { background: var(--surface-muted); border-color: var(--border-strong); } [data-theme="dark"] .c-btn--icon { background: var(--color-slate-800); color: var(--text-secondary); } [data-theme="dark"] .c-btn--icon:hover { background: var(--surface-accent); color: var(--interactive-primary); } [data-theme="dark"] .c-badge--primary { background: rgba(129, 140, 248, 0.18); } [data-theme="dark"] .c-badge--success { background: rgba(16, 185, 129, 0.18); } [data-theme="dark"] .c-badge--warning { background: rgba(245, 158, 11, 0.18); } [data-theme="dark"] .c-badge--danger { background: rgba(244, 63, 94, 0.18); } [data-theme="dark"] .c-badge--info { background: rgba(14, 165, 233, 0.18); } [data-theme="dark"] .c-alert--success { background: rgba(16, 185, 129, 0.1); } [data-theme="dark"] .c-alert--danger { background: rgba(244, 63, 94, 0.1); } [data-theme="dark"] .c-alert--warning { background: rgba(245, 158, 11, 0.1); } [data-theme="dark"] .c-alert--info { background: rgba(14, 165, 233, 0.1); } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-slate-900); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-slate-700); border-color: var(--color-slate-900); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-slate-600); } .dark-theme { color-scheme: dark; }