/* ============================================================ MEL — Corporate theme Activates on . Serious enterprise look: confident corporate blue primary, teal/cyan accent, green success, cool slate neutrals. Crisp borders, restrained shadows, moderate radii. The amber Mel logo stays (brand mark is constant across themes). Same token contract as the other Mel themes. ============================================================ */ @layer theme { :root[data-theme="corp"] { color-scheme: only light; /* ---------- PRIMITIVES : Corporate Blue ---------- */ --blue-50: #eef5fd; --blue-100: #d6e6fa; --blue-200: #aecdf3; --blue-300: #7fadea; --blue-400: #4a86dd; --blue-500: #2167cf; /* brand fill */ --blue-600: #1a55b0; /* hover */ --blue-700: #17468f; /* link text on light */ --blue-800: #143a73; --blue-900: #112e59; /* ---------- PRIMITIVES : Teal / Cyan accent ---------- */ --teal-50: #e7f6f7; --teal-100: #c5e9ec; --teal-300: #6cc6cf; --teal-500: #0e9aa7; --teal-600: #0b7d88; --teal-700: #0a636c; /* ---------- BRAND ---------- */ --color-primary: var(--blue-500); --color-primary-hover: var(--blue-600); --color-primary-fg: #ffffff; --color-primary-text: var(--blue-700); --color-secondary: var(--teal-600); --color-secondary-hover: var(--teal-700); /* semantics (enterprise-calibrated) */ --color-error: #d23b46; --color-success: #1f9457; --color-warning: #c9821f; --color-info: var(--teal-600); --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: #eef2f7; /* cool light gray */ --bg-surface: #ffffff; /* ---------- TYPE COLORS ---------- */ --text-main: #18222e; --text-muted: #56657a; --text-inverted: #ffffff; /* ---------- BORDERS ---------- */ --border-subtle: #e2e8f0; --border-base: #cbd5e1; /* ---------- FORMS ---------- */ --input-bg: #ffffff; --input-bg-disabled: #eef2f7; --input-border: #cbd5e1; --input-border-hover: #94a3b8; --input-ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 78%); --input-text: var(--text-main); --input-placeholder: #94a3b8; --input-addon-bg: #eef2f7; --fieldset-border: #e2e8f0; --checkbox-border: #94a3b8; /* ---------- BUTTONS ---------- */ --btn-bg: #eef2f7; --btn-bg-hover: #e2e8f0; --btn-text: #33415c; --btn-outline-border: #cbd5e1; --btn-outline-text: #33415c; --btn-ghost-text: #56657a; --btn-ghost-hover: rgba(33, 103, 207, 0.08); --btn-outline-hover-bg: var(--blue-50); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: #cbd5e1; --toggle-bg-checked: var(--color-primary); --range-track-bg: #e2e8f0; --range-track-fill: var(--color-primary); --range-thumb: var(--color-primary); --rating-color: #cbd5e1; --rating-color-active: var(--color-warning); /* ---------- BADGE / TAG ---------- */ --badge-outline-border: #cbd5e1; --badge-bg: #eef2f7; --tag-bg: #eef2f7; --tag-text: #33415c; /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: #e2e8f0; --progress-fill: var(--color-primary); --skeleton-bg: #e2e8f0; --skeleton-shine: #f1f5f9; /* ---------- AVATAR ---------- */ --avatar-ring-offset: var(--bg-base); --avatar-bg: var(--blue-100); --avatar-color: var(--blue-700); /* ---------- DIVIDER ---------- */ --divider-color: #e2e8f0; /* ---------- TABLES ---------- */ --table-header-bg: #f4f7fb; --table-border: #e2e8f0; --table-row-hover: var(--blue-50); --table-striped-bg: #f4f7fb; /* ---------- CODE / QUOTE ---------- */ --code-bg: #eef2f7; --blockquote-border: var(--color-primary); --blockquote-bg: var(--blue-50); /* ---------- DIALOG ---------- */ --dialog-border: #e2e8f0; --backdrop-bg: rgba(18, 34, 56, 0.42); --backdrop-blur: blur(2px); /* ---------- DETAILS / MEDIA ---------- */ --details-bg: #ffffff; --details-header-bg: #f4f7fb; --details-border: #e2e8f0; --audio-bg: #eef2f7; /* ---------- ALERTS ---------- */ --alert-bg: #ffffff; --alert-border: #e2e8f0; --alert-info-bg: color-mix(in srgb, var(--color-info), white 88%); --alert-info-border:color-mix(in srgb, var(--color-info), white 68%); --alert-success-bg: color-mix(in srgb, var(--color-success), white 88%); --alert-success-border: color-mix(in srgb, var(--color-success), white 68%); --alert-warning-bg: color-mix(in srgb, var(--color-warning), white 86%); --alert-warning-border: color-mix(in srgb, var(--color-warning), white 64%); --alert-error-bg: color-mix(in srgb, var(--color-error), white 88%); --alert-error-border: color-mix(in srgb, var(--color-error), white 68%); --alert-info-text: var(--teal-700); --alert-success-text: color-mix(in srgb, var(--color-success), black 24%); --alert-warning-text: color-mix(in srgb, var(--color-warning), black 26%); --alert-error-text: color-mix(in srgb, var(--color-error), black 20%); /* ---------- BOX / DIFF ---------- */ --box-bg: #ffffff; --diff-bg: #ffffff; --diff-border: #e2e8f0; --diff-header-bg: #f4f7fb; /* ---------- CARD ---------- */ --card-bg: #ffffff; --card-border: #e2e8f0; --card-header-bg: #f4f7fb; --card-footer-border: #e2e8f0; /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: #ffffff; --navbar-border: #e2e8f0; --pagination-bg: #ffffff; --pagination-border: #e2e8f0; --pagination-text: var(--text-main); --pagination-hover-bg: #eef2f7; /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: #e2e8f0; --modal-bg: #ffffff; --accordion-border: #e2e8f0; --accordion-header-bg: #f4f7fb; --accordion-header-hover-bg: #eef2f7; /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-hover-bg: var(--blue-50); --tooltip-bg: #18222e; --tooltip-text: #ffffff; --menu-item-hover-bg: #eef2f7; --menu-item-active-bg: var(--blue-50); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: #ffffff; --message-bg: #ffffff; --message-border: #e2e8f0; /* ---------- STAT / TIMELINE ---------- */ --stat-bg: #ffffff; --stat-border: #e2e8f0; --stat-icon-bg: var(--blue-50); --stat-icon-color: var(--blue-700); --timeline-line: #e2e8f0; --timeline-marker: var(--color-primary); --timeline-marker-ring: #ffffff; /* ---------- LISTS / DRAWER / OFFCANVAS / POPOVER / PANEL ---------- */ --list-group-bg: #ffffff; --list-group-border: #e2e8f0; --list-group-hover-bg: #f4f7fb; --drawer-bg: #ffffff; --drawer-border: #e2e8f0; --offcanvas-bg: #ffffff; --bottom-nav-bg: #ffffff; --bottom-nav-border: #e2e8f0; --popover-bg: #ffffff; --popover-border: #e2e8f0; --panel-bg: #ffffff; --panel-border: #e2e8f0; /* ---------- PRICING / HERO / CHAT / CAROUSEL ---------- */ --pricing-bg: #ffffff; --pricing-border: #e2e8f0; --pricing-featured-border: var(--color-primary); --hero-bg: #f4f7fb; --chat-bubble-bg: #eef2f7; --chat-bubble-end-bg: var(--color-primary); --chat-bubble-end-text: #ffffff; --carousel-nav-bg: #ffffff; --carousel-nav-border: #e2e8f0; --carousel-nav-hover-bg: #eef2f7; /* ---------- SHADOWS (cool, restrained) ---------- */ --shadow-xs: 0 1px 2px rgba(18, 34, 56, 0.06); --shadow-sm: 0 1px 3px rgba(18, 34, 56, 0.08), 0 1px 2px rgba(18, 34, 56, 0.05); --shadow-md: 0 6px 18px -6px rgba(18, 34, 56, 0.14), 0 2px 6px -2px rgba(18, 34, 56, 0.08); --shadow-lg: 0 16px 36px -12px rgba(18, 34, 56, 0.20), 0 6px 14px -8px rgba(18, 34, 56, 0.12); --shadow-modal: 0 26px 56px -16px rgba(18, 34, 56, 0.32); /* ---------- RADII (crisp, professional) ---------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-pill: 999px; } } /* ============================================================ STRUCTURAL — repaint honey-hardcoded chrome to corporate blue (higher specificity than mel-refinements, so these win) ============================================================ */ [data-theme="corp"] body { background: var(--bg-base); } /* primary button: solid corporate blue */ [data-theme="corp"] .btn-primary, [data-theme="corp"] button[type="submit"]:not([class]), [data-theme="corp"] input[type="submit"]:not([class]) { background-color: var(--color-primary); background-image: none; color: #ffffff; } [data-theme="corp"] .btn-primary:hover:not(:disabled), [data-theme="corp"] button[type="submit"]:not([class]):hover:not(:disabled), [data-theme="corp"] input[type="submit"]:not([class]):hover:not(:disabled) { background-color: var(--color-primary-hover); } /* link hovers */ [data-theme="corp"] a:not([class]):hover, [data-theme="corp"] .link-primary:hover { color: var(--blue-800); } /* rail active = blue tint + blue text */ [data-theme="corp"] .mel-rail a.is-active { background: var(--blue-50); color: var(--blue-700); } [data-theme="corp"] .mel-rail.is-dark a.is-active { background: color-mix(in srgb, var(--color-primary), transparent 76%); color: #bcd4f4; } /* topbar avatar (inline honey) -> blue */ [data-theme="corp"] .app-topbar .avatar { background: var(--color-primary) !important; } /* segmented control active label */ [data-theme="corp"] .seg button.on { color: var(--blue-700); } /* soft status pills: cyan info, keep success/error/neutral; warning amber */ [data-theme="corp"] .badge-soft-info { background: color-mix(in srgb, var(--color-info), white 86%); color: var(--teal-700); } [data-theme="corp"] .role-admin { background: color-mix(in srgb, var(--color-info), white 86%); color: var(--teal-700); } /* KPI icon tiles that were honey/amber -> primary blue tint (keep semantic ones) */ [data-theme="corp"] .ic-honey { background: var(--blue-50) !important; color: var(--blue-700) !important; } /* settings menu + top-nav active = blue tint */ [data-theme="corp"] .set-menu a.is-active { background: var(--blue-50); color: var(--blue-700); } [data-theme="corp"] .set-menu a.is-active svg { color: var(--blue-700); } [data-theme="corp"] .top nav a.is-active { background: var(--blue-50); color: var(--blue-700); } /* auth accent strip -> blue→teal gradient */ [data-theme="corp"] .auth-accent, [data-theme="corp"] .mel-login-accent { background: linear-gradient(90deg, var(--blue-500), var(--teal-500)); } /* kpi link + breadcrumb already use --color-primary-text (blue) via tokens */