/* ============================================================ MEL — Premium / Elegant theme Activates on . Refined luxury: warm ivory canvas, restrained refined-gold accent (in place of the loud amber), high-contrast serif display type (Cormorant), hairline borders, airy spacing, soft low shadows. The amber Mel logo stays as the brand mark. Same token contract as the other Mel themes. ============================================================ */ @layer theme { :root[data-theme="premium"] { color-scheme: only light; /* ---------- PRIMITIVES : Refined Gold ---------- */ --gold-50: #f9f5ec; --gold-100: #f1e8d3; --gold-200: #e6d4ab; --gold-300: #d6bd82; --gold-400: #c2a25c; --gold-500: #ad8a3e; /* brand fill (muted, refined) */ --gold-600: #927231; /* hover */ --gold-700: #6f5727; /* text on light */ --gold-800: #564321; --gold-900: #3f3119; /* ---------- WARM NEUTRALS (greige) ---------- */ --ink-900: #221d18; --ink-800: #2c261f; --ink-700: #41382e; --greige-500: #8a7d6c; --greige-400: #a89a86; --greige-300: #cabfad; --greige-200: #e6ddcd; --greige-100: #efe8db; --greige-50: #f7f2e9; /* ---------- BRAND ---------- */ --color-primary: var(--gold-500); --color-primary-hover: var(--gold-600); --color-primary-fg: #fffdf8; --color-primary-text: var(--gold-700); --color-secondary: var(--ink-700); --color-secondary-hover: var(--ink-900); /* semantics (muted, refined) */ --color-error: #b14a47; --color-success: #5a7d52; --color-warning: #b6883a; --color-info: #5a7184; --color-error-bg: color-mix(in srgb, var(--color-error), transparent 90%); --color-success-bg: color-mix(in srgb, var(--color-success), transparent 90%); /* ---------- GLOBAL ---------- */ --bg-base: #f3ede1; /* warm ivory */ --bg-surface: #fffefb; /* ---------- TYPE COLORS ---------- */ --text-main: var(--ink-800); --text-muted: #7a6e5e; --text-inverted: #fffefb; /* ---------- BORDERS (hairline greige) ---------- */ --border-subtle: #e8e0d1; --border-base: #d8cdba; /* ---------- FORMS ---------- */ --input-bg: #fffefb; --input-bg-disabled: #f1ebdf; --input-border: #d8cdba; --input-border-hover: #b8aa92; --input-ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%); --input-text: var(--text-main); --input-placeholder: #a89a86; --input-addon-bg: #f3ede1; --fieldset-border: #e8e0d1; --checkbox-border: #b8aa92; /* ---------- BUTTONS ---------- */ --btn-bg: #f3ede1; --btn-bg-hover: #e9e0d0; --btn-text: var(--ink-700); --btn-outline-border: #d8cdba; --btn-outline-text: var(--ink-700); --btn-ghost-text: #7a6e5e; --btn-ghost-hover: rgba(173, 138, 62, 0.10); --btn-outline-hover-bg: var(--gold-50); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: #d8cdba; --toggle-bg-checked: var(--color-primary); --range-track-bg: #e6ddcd; --range-track-fill: var(--color-primary); --range-thumb: var(--color-primary); --rating-color: #d8cdba; --rating-color-active: var(--gold-500); /* ---------- BADGE / TAG ---------- */ --badge-outline-border: #d8cdba; --badge-bg: #f3ede1; --tag-bg: #f3ede1; --tag-text: var(--ink-700); /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: #e6ddcd; --progress-fill: var(--color-primary); --skeleton-bg: #e6ddcd; --skeleton-shine: #f3ede1; /* ---------- AVATAR ---------- */ --avatar-ring-offset: var(--bg-base); --avatar-bg: var(--gold-100); --avatar-color: var(--gold-700); /* ---------- DIVIDER ---------- */ --divider-color: #e8e0d1; /* ---------- TABLES ---------- */ --table-header-bg: #f7f2e9; --table-border: #e8e0d1; --table-row-hover: var(--gold-50); --table-striped-bg: #f9f5ec; /* ---------- CODE / QUOTE ---------- */ --code-bg: #f3ede1; --blockquote-border: var(--gold-500); --blockquote-bg: var(--gold-50); /* ---------- DIALOG ---------- */ --dialog-border: #e8e0d1; --backdrop-bg: rgba(34, 29, 24, 0.40); --backdrop-blur: blur(3px); /* ---------- DETAILS / MEDIA ---------- */ --details-bg: #fffefb; --details-header-bg: #f7f2e9; --details-border: #e8e0d1; --audio-bg: #f3ede1; /* ---------- ALERTS ---------- */ --alert-bg: #fffefb; --alert-border: #e8e0d1; --alert-info-bg: color-mix(in srgb, var(--color-info), white 86%); --alert-info-border:color-mix(in srgb, var(--color-info), white 64%); --alert-success-bg: color-mix(in srgb, var(--color-success), white 86%); --alert-success-border: color-mix(in srgb, var(--color-success), white 64%); --alert-warning-bg: var(--gold-50); --alert-warning-border: color-mix(in srgb, var(--color-warning), white 60%); --alert-error-bg: color-mix(in srgb, var(--color-error), white 86%); --alert-error-border: color-mix(in srgb, var(--color-error), white 64%); --alert-info-text: color-mix(in srgb, var(--color-info), black 28%); --alert-success-text: color-mix(in srgb, var(--color-success), black 26%); --alert-warning-text: var(--gold-800); --alert-error-text: color-mix(in srgb, var(--color-error), black 22%); /* ---------- BOX / DIFF ---------- */ --box-bg: #fffefb; --diff-bg: #fffefb; --diff-border: #e8e0d1; --diff-header-bg: #f7f2e9; /* ---------- CARD ---------- */ --card-bg: #fffefb; --card-border: #e8e0d1; --card-header-bg: transparent; --card-footer-border: #e8e0d1; /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: #fffefb; --navbar-border: #e8e0d1; --pagination-bg: #fffefb; --pagination-border: #e8e0d1; --pagination-text: var(--text-main); --pagination-hover-bg: #f3ede1; /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: #e8e0d1; --modal-bg: #fffefb; --accordion-border: #e8e0d1; --accordion-header-bg: #f7f2e9; --accordion-header-hover-bg: #f3ede1; /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: #fffefb; --dropdown-border: #e8e0d1; --dropdown-hover-bg: var(--gold-50); --tooltip-bg: var(--ink-900); --tooltip-text: #fffefb; --menu-item-hover-bg: #f3ede1; --menu-item-active-bg: var(--gold-50); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: #fffefb; --message-bg: #fffefb; --message-border: #e8e0d1; /* ---------- STAT / TIMELINE ---------- */ --stat-bg: #fffefb; --stat-border: #e8e0d1; --stat-icon-bg: var(--gold-50); --stat-icon-color: var(--gold-700); --timeline-line: #e8e0d1; --timeline-marker: var(--color-primary); --timeline-marker-ring: #fffefb; /* ---------- LISTS / DRAWER / OFFCANVAS / POPOVER / PANEL ---------- */ --list-group-bg: #fffefb; --list-group-border: #e8e0d1; --list-group-hover-bg: #f7f2e9; --drawer-bg: #fffefb; --drawer-border: #e8e0d1; --offcanvas-bg: #fffefb; --bottom-nav-bg: #fffefb; --bottom-nav-border: #e8e0d1; --popover-bg: #fffefb; --popover-border: #e8e0d1; --panel-bg: #fffefb; --panel-border: #e8e0d1; /* ---------- PRICING / HERO / CHAT / CAROUSEL ---------- */ --pricing-bg: #fffefb; --pricing-border: #e8e0d1; --pricing-featured-border: var(--color-primary); --hero-bg: #f7f2e9; --chat-bubble-bg: #f3ede1; --chat-bubble-end-bg: var(--color-primary); --chat-bubble-end-text: #fffdf8; --carousel-nav-bg: #fffefb; --carousel-nav-border: #e8e0d1; --carousel-nav-hover-bg: #f3ede1; /* ---------- SHADOWS (soft, warm, low) ---------- */ --shadow-xs: 0 1px 2px rgba(63, 49, 25, 0.05); --shadow-sm: 0 1px 3px rgba(63, 49, 25, 0.07), 0 1px 2px rgba(63, 49, 25, 0.04); --shadow-md: 0 10px 30px -12px rgba(63, 49, 25, 0.16), 0 2px 6px -3px rgba(63, 49, 25, 0.07); --shadow-lg: 0 24px 50px -18px rgba(63, 49, 25, 0.22), 0 8px 18px -10px rgba(63, 49, 25, 0.10); --shadow-modal: 0 32px 70px -20px rgba(34, 29, 24, 0.34); /* ---------- RADII (refined) ---------- */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1.125rem; /* 18px */ --radius-pill: 999px; } } /* ============================================================ STRUCTURAL — elegant serif display + gold accents (higher specificity than mel-refinements, so these win) ============================================================ */ [data-theme="premium"] body { background: var(--bg-base); letter-spacing: 0; } /* serif display headings */ [data-theme="premium"] h1:not([class]), [data-theme="premium"] .page-head h1, [data-theme="premium"] .content-head h2, [data-theme="premium"] .mel-login h1, [data-theme="premium"] .auth h1, [data-theme="premium"] .stat-value { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: 0.005em; } [data-theme="premium"] .page-head h1 { font-size: 2.6rem; line-height: 1.08; } [data-theme="premium"] .stat-value { font-weight: 600; font-size: 2.1rem; } [data-theme="premium"] .auth h1, [data-theme="premium"] .mel-login h1 { font-size: 2rem; } /* refined card titles */ [data-theme="premium"] .card-header { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--text-main); background: transparent; border-bottom: 1px solid var(--border-subtle); } /* section labels: gold, fine tracking */ [data-theme="premium"] .section-label { color: var(--gold-700); letter-spacing: 0.14em; font-weight: 700; } /* uppercase table headers: greige, fine tracking */ [data-theme="premium"] .table th { color: var(--greige-500); letter-spacing: 0.1em; } /* primary button: refined gold, subtle */ [data-theme="premium"] .btn-primary, [data-theme="premium"] button[type="submit"]:not([class]), [data-theme="premium"] input[type="submit"]:not([class]) { background-image: none; background-color: var(--gold-500); color: var(--color-primary-fg); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--shadow-xs); letter-spacing: 0.02em; } [data-theme="premium"] .btn-primary:hover:not(:disabled), [data-theme="premium"] button[type="submit"]:not([class]):hover:not(:disabled), [data-theme="premium"] input[type="submit"]:not([class]):hover:not(:disabled) { background-color: var(--gold-600); } /* hairline borders on the working surfaces */ [data-theme="premium"] .data-card, [data-theme="premium"] .filter-bar, [data-theme="premium"] .form-card, [data-theme="premium"] .card, [data-theme="premium"] .stat-card, [data-theme="premium"] .set-menu, [data-theme="premium"] .auth-card { border: 1px solid var(--border-subtle); } /* link hovers */ [data-theme="premium"] a:not([class]):hover, [data-theme="premium"] .link-primary:hover { color: var(--gold-600); } /* rail active = gold tint + gold text, with a gold left marker */ [data-theme="premium"] .mel-rail a.is-active { background: var(--gold-50); color: var(--gold-700); position: relative; } [data-theme="premium"] .mel-rail a.is-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--gold-500); } [data-theme="premium"] .mel-rail.is-dark a.is-active { background: color-mix(in srgb, var(--gold-500), transparent 80%); color: var(--gold-300); } /* topbar avatar (inline honey) -> gold */ [data-theme="premium"] .app-topbar .avatar { background: var(--gold-500) !important; } /* segmented control active */ [data-theme="premium"] .seg button.on { color: var(--gold-700); } /* soft status pills: warm warning, keep success/error refined */ [data-theme="premium"] .badge-soft-warning { background: var(--gold-50); color: var(--gold-800); } [data-theme="premium"] .role-super { background: var(--gold-50); color: var(--gold-700); } /* KPI icon tiles that were honey/amber -> gold */ [data-theme="premium"] .ic-honey, [data-theme="premium"] .ic-warning { background: var(--gold-50) !important; color: var(--gold-700) !important; } /* settings menu + top-nav active = gold tint */ [data-theme="premium"] .set-menu a.is-active { background: var(--gold-50); color: var(--gold-700); } [data-theme="premium"] .set-menu a.is-active svg { color: var(--gold-700); } [data-theme="premium"] .top nav a.is-active { background: var(--gold-50); color: var(--gold-700); } /* auth accent strip -> refined gold gradient */ [data-theme="premium"] .auth-accent, [data-theme="premium"] .mel-login-accent { background: linear-gradient(90deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600)); } /* page subtitle in a softer serif-adjacent tone */ [data-theme="premium"] .page-head .page-sub { color: #8a7d6c; }