/* ============================================================ MEL — Dark theme Activates on . Re-maps the semantic tokens from theme-mel.css to a warm dark slate. Primitive ramps (--honey-*, --slate-*) stay; only mappings change, so every component follows automatically. ============================================================ */ @layer theme { :root[data-theme="dark"] { color-scheme: only dark; /* Dark surface ramp (warm slate, not pure black) */ --d-bg: #14181e; /* page */ --d-surface: #1b212a; /* cards, topbar, rail */ --d-raised: #222a34; /* headers, hovers */ --d-line: #2d3742; /* borders */ --d-line-2: #394553; /* stronger borders */ /* ---------- BRAND ---------- */ --color-primary: var(--honey-500); --color-primary-hover: var(--honey-400); --color-primary-fg: var(--honey-ink); --color-primary-text: var(--honey-300); /* honey reads light on dark */ --color-secondary: var(--slate-300); --color-secondary-hover: #fff; /* ---------- GLOBAL ---------- */ --bg-base: var(--d-bg); --bg-surface: var(--d-surface); /* ---------- TYPE COLORS ---------- */ --text-main: #e7ecf2; --text-muted: #98a4b3; --text-inverted: #14181e; /* ---------- BORDERS ---------- */ --border-subtle: var(--d-line); --border-base: var(--d-line-2); /* ---------- FORMS ---------- */ --input-bg: #161b22; --input-bg-disabled: #1b212a; --input-border: var(--d-line-2); --input-border-hover: #4a5868; --input-text: var(--text-main); --input-placeholder: #6c7888; --input-addon-bg: var(--d-raised); --fieldset-border: var(--d-line); --checkbox-border: #54616f; /* ---------- BUTTONS ---------- */ --btn-bg: var(--d-raised); --btn-bg-hover: #2c3744; --btn-text: #d7dee6; --btn-outline-border: var(--d-line-2); --btn-outline-text: #d7dee6; --btn-ghost-text: #98a4b3; --btn-ghost-hover: rgba(255,255,255,0.06); --btn-outline-hover-bg: color-mix(in srgb, var(--color-primary), transparent 86%); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: #3a4655; --range-track-bg: #2d3742; --rating-color: #3a4655; /* ---------- BADGE / TAG ---------- */ --badge-outline-border: var(--d-line-2); --badge-bg: var(--d-raised); --tag-bg: var(--d-raised); --tag-text: #d7dee6; /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: #2d3742; --skeleton-bg: #2d3742; --skeleton-shine: #394553; /* ---------- AVATAR ---------- */ --avatar-ring-offset: var(--d-surface); --avatar-bg: color-mix(in srgb, var(--honey-500), transparent 80%); --avatar-color: var(--honey-300); /* ---------- DIVIDER ---------- */ --divider-color: var(--d-line); /* ---------- TABLES ---------- */ --table-header-bg: #1f2630; --table-border: var(--d-line); --table-row-hover: color-mix(in srgb, var(--honey-500), transparent 90%); --table-striped-bg: #1f2630; /* ---------- CODE / QUOTE ---------- */ --code-bg: #11151b; --blockquote-bg: color-mix(in srgb, var(--honey-500), transparent 90%); /* ---------- DIALOG ---------- */ --dialog-border: var(--d-line); --backdrop-bg: rgba(5, 8, 12, 0.66); /* ---------- DETAILS / MEDIA ---------- */ --details-bg: var(--d-surface); --details-header-bg: var(--d-raised); --details-border: var(--d-line); --audio-bg: var(--d-raised); /* ---------- ALERTS (deepened tints) ---------- */ --alert-bg: var(--d-surface); --alert-border: var(--d-line); --alert-info-bg: color-mix(in srgb, var(--color-info), #14181e 78%); --alert-info-border:color-mix(in srgb, var(--color-info), #14181e 55%); --alert-success-bg: color-mix(in srgb, var(--color-success), #14181e 78%); --alert-success-border: color-mix(in srgb, var(--color-success), #14181e 55%); --alert-warning-bg: color-mix(in srgb, var(--honey-600), #14181e 76%); --alert-warning-border: color-mix(in srgb, var(--honey-500), #14181e 52%); --alert-error-bg: color-mix(in srgb, var(--color-error), #14181e 78%); --alert-error-border: color-mix(in srgb, var(--color-error), #14181e 55%); --alert-info-text: color-mix(in srgb, var(--color-info), white 55%); --alert-success-text: color-mix(in srgb, var(--color-success), white 55%); --alert-warning-text: var(--honey-200); --alert-error-text: color-mix(in srgb, var(--color-error), white 50%); /* ---------- BOX / DIFF ---------- */ --box-bg: var(--d-surface); --diff-bg: var(--d-surface); --diff-border: var(--d-line); --diff-header-bg: var(--d-raised); /* ---------- CARD ---------- */ --card-bg: var(--d-surface); --card-border: var(--d-line); --card-header-bg: var(--d-raised); --card-footer-border: var(--d-line); /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: var(--d-surface); --navbar-border: var(--d-line); --pagination-bg: var(--d-surface); --pagination-border: var(--d-line); --pagination-text: var(--text-main); --pagination-hover-bg: var(--d-raised); /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: var(--d-line); --modal-bg: var(--d-surface); --accordion-border: var(--d-line); --accordion-header-bg: var(--d-raised); --accordion-header-hover-bg: #2c3744; /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: var(--d-raised); --dropdown-border: var(--d-line); --dropdown-hover-bg: color-mix(in srgb, var(--color-primary), transparent 84%); --tooltip-bg: #06090d; --tooltip-text: #e7ecf2; --menu-item-hover-bg: rgba(255,255,255,0.06); --menu-item-active-bg: color-mix(in srgb, var(--color-primary), transparent 82%); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: var(--d-raised); --message-bg: var(--d-surface); --message-border: var(--d-line); /* ---------- STAT / TIMELINE ---------- */ --stat-bg: var(--d-surface); --stat-border: var(--d-line); --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 82%); --stat-icon-color: var(--honey-300); --timeline-line: var(--d-line); --timeline-marker-ring: var(--d-surface); /* ---------- LISTS / DRAWER / OFFCANVAS ---------- */ --list-group-bg: var(--d-surface); --list-group-border: var(--d-line); --list-group-hover-bg: var(--d-raised); --drawer-bg: var(--d-surface); --drawer-border: var(--d-line); --offcanvas-bg: var(--d-surface); --bottom-nav-bg: var(--d-surface); --bottom-nav-border: var(--d-line); --popover-bg: var(--d-raised); --popover-border: var(--d-line); --panel-bg: var(--d-surface); --panel-border: var(--d-line); /* ---------- PRICING / HERO / CHAT ---------- */ --pricing-bg: var(--d-surface); --pricing-border: var(--d-line); --hero-bg: var(--d-raised); --chat-bubble-bg: var(--d-raised); /* ---------- CAROUSEL ---------- */ --carousel-nav-bg: var(--d-raised); --carousel-nav-border: var(--d-line); --carousel-nav-hover-bg: #2c3744; /* ---------- SHADOWS (deeper for dark) ---------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4); --shadow-lg: 0 22px 48px -14px rgba(0,0,0,0.7), 0 6px 16px -8px rgba(0,0,0,0.5); --shadow-modal: 0 30px 64px -16px rgba(0,0,0,0.78); } } /* ---------- dark-only refinements (outside @layer so they win) ---------- */ :root[data-theme="dark"] html, html[data-theme="dark"] { color-scheme: only dark; } /* App shell pieces driven by hard-coded slate in mel-app/refinements */ [data-theme="dark"] .mel-rail { background: var(--d-surface); border-right-color: var(--d-line); } [data-theme="dark"] .mel-rail a { color: #7d8a99; } [data-theme="dark"] .mel-rail a:hover { background: rgba(255,255,255,0.06); color: #fff; } [data-theme="dark"] .mel-rail a.is-active { background: color-mix(in srgb, var(--honey-500), transparent 80%); color: var(--honey-300); } [data-theme="dark"] .app-topbar { background: var(--d-surface); border-bottom-color: var(--d-line); } [data-theme="dark"] .data-card, [data-theme="dark"] .filter-bar, [data-theme="dark"] .form-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .stat-horizontal { background: var(--d-surface); border-color: var(--d-line); } [data-theme="dark"] .data-card table.table tbody tr { border-top-color: var(--d-line); } [data-theme="dark"] .table-foot { border-top-color: var(--d-line); } [data-theme="dark"] .form-section + .form-section, [data-theme="dark"] .form-card .form-section + .form-section { border-top-color: var(--d-line); } [data-theme="dark"] .form-foot { background: #11151b; border-top-color: var(--d-line); } [data-theme="dark"] .id-name { color: var(--text-main); } [data-theme="dark"] .kv { border-top-color: var(--d-line); } [data-theme="dark"] .code-chip { background: #11151b; color: #cdd6df; } [data-theme="dark"] .role-pill { background: var(--d-raised); color: #cdd6df; } [data-theme="dark"] .yn-no, [data-theme="dark"] .badge-soft-neutral { background: var(--d-raised); color: #98a4b3; } [data-theme="dark"] .seg { background: #11151b; } [data-theme="dark"] .seg button.on { background: var(--d-raised); color: var(--honey-300); } [data-theme="dark"] .section-label { color: #6c7888; } [data-theme="dark"] .card-header { color: var(--text-main); } /* soft-tinted status pills: deepen so text stays legible */ [data-theme="dark"] .badge-soft-success { background: color-mix(in srgb, var(--color-success), #14181e 72%); color: color-mix(in srgb, var(--color-success), white 40%); } [data-theme="dark"] .badge-soft-warning { background: color-mix(in srgb, var(--honey-600), #14181e 70%); color: var(--honey-200); } [data-theme="dark"] .badge-soft-error { background: color-mix(in srgb, var(--color-error), #14181e 72%); color: color-mix(in srgb, var(--color-error), white 38%); } [data-theme="dark"] .badge-soft-info { background: color-mix(in srgb, var(--color-info), #14181e 72%); color: color-mix(in srgb, var(--color-info), white 42%); } [data-theme="dark"] .yn-yes { background: color-mix(in srgb, var(--color-success), #14181e 72%); color: color-mix(in srgb, var(--color-success), white 40%); } [data-theme="dark"] .btn-soft-edit { background: color-mix(in srgb, var(--color-info), #14181e 72%); color: color-mix(in srgb, var(--color-info), white 48%); } [data-theme="dark"] .btn-soft-del { background: color-mix(in srgb, var(--color-error), #14181e 72%); color: color-mix(in srgb, var(--color-error), white 46%); }