/* ========================================================================== mailkoo — Design Tokens Single source of truth for the entire UI system. All CSS files reference ONLY these variables. --------------------------------------------------------------------------- NAMING NOTE --------------------------------------------------------------------------- `--color-teal*` is the PRIMARY BRAND token. The name is historical (the product formerly shipped a Mailchimp-derived teal) and is referenced ~6,500 times across components.css and 315 blade views, so it is kept verbatim for compatibility. Its VALUE is now the mailkoo indigo-violet. New work should prefer the `--color-primary*` aliases declared beside it. Both resolve to the same colour; the aliases exist so the legacy name can eventually be retired without another mass find-and-replace. --------------------------------------------------------------------------- Palette lineage: neutral ramp and semantic status colours follow Untitled UI; elevation follows a tinted-shadow model (shadows are tinted with the 900 neutral, never pure black, which is what separates a premium surface from a flat one). ========================================================================== */ :root { /* ================================================================ NEUTRAL RAMP — cool/slate-tinted, never pure gray. Pure gray (#111/#555/#999) reads cheap; a slight cool cast is what Linear, Stripe and Vercel all share. ================================================================ */ --gray-25: #FCFCFD; --gray-50: #F9FAFB; --gray-100: #F2F4F7; --gray-200: #EAECF0; --gray-300: #D0D5DD; --gray-400: #98A2B3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #182230; --gray-900: #101828; --gray-950: #0C111D; /* ================================================================ BRAND RAMP — mailkoo indigo-violet. Replaces the former Mailchimp teal (#007C89) completely. ================================================================ */ --primary-25: #F8F9FF; --primary-50: #EEF0FF; --primary-100: #E0E3FF; --primary-200: #C7CBFE; --primary-300: #A5A9FB; --primary-400: #8286F8; --primary-500: #6366F1; --primary-600: #4F46E5; /* main brand action */ --primary-700: #4338CA; --primary-800: #3730A3; --primary-900: #312E81; /* ================================================================ COLORS ================================================================ */ /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; /* Text hierarchy */ --color-text: #0C111D; /* headings, body, labels */ --color-text-secondary: #344054; /* secondary body text */ --color-text-muted: #667085; /* helper text, icons */ --color-text-disabled: #98A2B3; /* disabled, placeholder */ /* Backgrounds */ --color-page-bg: #F9FAFB; /* page background */ --color-card-bg: #FFFFFF; /* cards, panels, modals */ --color-hover-bg: #F9FAFB; /* hover state background */ --color-active-bg: #F2F4F7; /* active/pressed state */ --color-subtle-bg: #FCFCFD; /* subtle sections */ --color-bg-subtle: #FCFCFD; /* alias for --color-subtle-bg */ --color-banner-bg: #F2F4F7; /* announcement banners */ /* Borders */ --color-border: #EAECF0; /* cards, dividers, sections */ --color-border-strong: #D0D5DD; /* inputs, selects, secondary buttons */ --color-border-focus: #4F46E5; /* focus ring border */ /* Brand / Primary action. --color-teal* is the legacy name; --color-primary* is the alias. */ --color-teal: #4F46E5; --color-teal-hover: #4338CA; --color-teal-active: #3730A3; --color-teal-ring: rgba(79, 70, 229, 0.14); --color-teal-light: #EEF0FF; --color-primary: var(--color-teal); --color-primary-hover: var(--color-teal-hover); --color-primary-active: var(--color-teal-active); --color-primary-ring: var(--color-teal-ring); --color-primary-light: var(--color-teal-light); --color-primary-fg: #FFFFFF; /* text/icon on a filled primary */ /* ================================================================ ICON GRADIENT — the stroke sweep used by sidebar nav icons. Consumed by public/refactor/css/icon-gradients.css, which pipes these into the stops declared once per document by refactor/components/icons/mc-icon-gradients.blade.php. Every [data-color-scheme] block further down overrides these four tokens, so switching palette in the topbar re-tints the icons with no extra wiring. Override them anywhere (:root, an inline style, a plugin stylesheet) to retune the gradient. -from / -via / -to sweep diagonally across the 24x24 icon grid -accent the small detail mark inside each icon ================================================================ */ --icon-gradient-from: #3B82F6; /* blue — top-left */ --icon-gradient-via: #6366F1; /* indigo — midpoint */ --icon-gradient-to: #D946EF; /* magenta — bottom-right */ --icon-gradient-accent: #22D3EE; /* cyan — accent detail */ /* Geometry / weight knobs. The base icon set is drawn at 1.5px; the gradient reads thin at that weight, so nav icons get a touch more. (Outline path only — the sidebar renders filled glyphs, see below.) */ --icon-gradient-stroke-width: 1.7; --icon-gradient-idle-opacity: 0.88; /* idle rows sit below active */ /* Filled sidebar glyphs. Solid shapes read heavier than outlines at the same box, so these sit just under the 24px grid to keep the nav from looking cramped. */ --icon-filled-size: 21px; --icon-filled-size-collapsed: 23px; /* Status — Success. NOTE: the *-bg tokens below were previously all flattened to a single neutral #F0F0F0, which stripped every semantic surface of its meaning. They are restored to true tinted backgrounds. */ --color-success: #079455; --color-success-dark: #067647; --color-success-bg: #ECFDF3; --color-success-border: #ABEFC6; --color-success-ring: rgba(7, 148, 85, 0.14); /* Status — Error */ --color-error: #D92D20; --color-error-dark: #B42318; --color-error-bg: #FEF3F2; --color-error-border: #FECDCA; --color-error-ring: rgba(217, 45, 32, 0.14); /* Status — Warning */ --color-warning: #DC6803; --color-warning-dark: #B54708; --color-warning-bg: #FFFAEB; --color-warning-border: #FEDF89; --color-warning-ring: rgba(220, 104, 3, 0.14); /* Status — Info */ --color-info: #1570EF; --color-info-dark: #175CD3; --color-info-bg: #EFF8FF; --color-info-border: #B2DDFF; --color-info-ring: rgba(21, 112, 239, 0.14); /* Chart colors — categorical palette, brand-led and hue-separated for accessible adjacency. Restored from the previous muddy pastels. */ --chart-1: #6366F1; /* indigo — brand-led */ --chart-2: #10B981; /* emerald */ --chart-3: #0EA5E9; /* sky */ --chart-4: #F59E0B; /* amber */ --chart-5: #F43F5E; /* rose */ --chart-6: #8B5CF6; /* violet */ --chart-7: #06B6D4; /* cyan */ --chart-8: #84CC16; /* lime */ /* Chart background tints (icon boxes, badges). Previously all #F0F0F0 — restored to per-series tints. */ --chart-1-bg: #EEF0FF; --chart-2-bg: #ECFDF5; --chart-3-bg: #F0F9FF; --chart-4-bg: #FFFBEB; --chart-5-bg: #FFF1F3; --chart-6-bg: #F5F3FF; /* ================================================================ MESSENGER CHANNEL TONES — first-class brand tones for omnichannel surfaces. Aliases to --chart-N for the base hue + dedicated ink tones for WCAG AA contrast over the 18%-tinted chip bg. Used by mc-msg-channel-chip + mc-channel-status-card (W2) + every messenger-aware admin/customer surface across the platform. Showcase: /rui/ui#mc-msg-channel-chip · /rui/ui#mc-channel-status-card. ================================================================ */ --msg-ch-email: var(--chart-3); /* sky alias */ --msg-ch-email-ink: #065986; /* deep sky for label on light tint */ --msg-ch-sms: var(--chart-2); /* emerald alias */ --msg-ch-sms-ink: #05603A; /* deep emerald for label */ --msg-ch-wa: var(--chart-4); /* amber — WhatsApp brand-adjacent */ --msg-ch-wa-ink: #93370D; /* deep amber for label */ --msg-ch-tg: var(--chart-6); /* violet — Telegram brand-adjacent */ --msg-ch-tg-ink: #5925DC; /* deep violet for label */ --msg-ch-multi: var(--chart-1); /* indigo — multi-channel signifier */ --msg-ch-multi-ink: #3730A3; /* deep indigo for label */ /* ================================================================ MESSENGER CONVERSATION BUBBLE TONES (W6 — added 2026-05-20) ---------------------------------------------------------------- Intentionally divergent from --msg-ch-* (categorical palette) because bubbles fill ≥10% of the conversation surface — brand recognition matters more than chart-palette coherence. Each tone is used for: • 2px accent strip on the bubble's inbound-side edge • bubble "tail" corner color • the channel-themed Send button in mc-conv-compose (C13) Body background uses --bubble-bg-{in,out} (theme-aware). Body text always uses --color-text (NOT a per-channel ink). Showcase: /rui/ui#mc-conv-bubble (C12, ships first in W6). ================================================================ */ --bubble-tone-sms: #0F766E; /* deep teal */ --bubble-tone-whatsapp: #128C7E; /* official WA brand-aligned green */ --bubble-tone-telegram: #0088CC; /* official Telegram brand blue */ --bubble-tone-email: #667085; /* neutral — email = channel zero */ --bubble-bg-in: var(--color-subtle-bg); /* inbound bubble fill */ --bubble-bg-out: #EEF0FF; /* pale brand indigo */ --bubble-radius: 16px; --bubble-radius-tail: 4px; /* tail corner — clipped to 4px */ --bubble-max-width: min(70%, 480px); /* SVG Illustration tokens. Previously flattened to neutral rgba(0,0,0,0.1) fills; restored to brand/series tints so in-page illustrations carry the palette. */ --illust-stroke: #D0D5DD; /* wireframe lines */ --illust-stroke-bold: #98A2B3; /* heading/primary lines */ --illust-fill: #EAECF0; /* card/panel fills */ --illust-bg: #F2F4F7; /* background areas */ --illust-teal: rgba(79, 70, 229, 0.10); /* brand fills */ --illust-teal-bold: rgba(79, 70, 229, 0.22); /* darker brand fills */ --illust-chart-1: rgba(99, 102, 241, 0.16); --illust-chart-2: rgba(16, 185, 129, 0.16); --illust-chart-3: rgba(14, 165, 233, 0.16); --illust-chart-4: rgba(245, 158, 11, 0.16); --illust-chart-5: rgba(244, 63, 94, 0.16); --illust-chart-6: rgba(139, 92, 246, 0.16); /* Overlay — tinted with the 950 neutral rather than pure black */ --color-overlay: rgba(12, 17, 29, 0.60); --color-overlay-heavy: rgba(12, 17, 29, 0.75); /* ================================================================ AI ACCENT PALETTE — pastel-bg + same-hue-dark-fg pairs ---------------------------------------------------------------- Used by every AI surface (chatbox launcher, sparkle button, AI admin previews). Each colour is a light pastel TINT for the background paired with a CRISP dark same-hue colour for the glyph/text. Default theme = violet (`--color-ai-violet-bg/-fg`). Five hue pairs ship in F2.6: violet · teal · orange · green · indigo. Each pair has a light-mode + dark-mode variant tuned for contrast and ambient feel. Showcase: `/rui/ui#ai-palette`. ================================================================ */ --color-ai-violet-bg: #F5F3FF; --color-ai-violet-fg: #6D28D9; --color-ai-teal-bg: #CCFBF1; --color-ai-teal-fg: #0F766E; --color-ai-orange-bg: #FFEDD5; --color-ai-orange-fg: #C2410C; --color-ai-green-bg: #DCFCE7; --color-ai-green-fg: #15803D; --color-ai-indigo-bg: #EEF0FF; --color-ai-indigo-fg: #3730A3; /* ================================================================ TYPOGRAPHY (Size ramp and hierarchy are refined in the Typography module; this block fixes the token-level defects only.) ================================================================ */ --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace; /* Size scale — rem so the UI honours the reader's browser font-size. Root is 100% (16px default), so every step below renders at exactly the same pixel size it did when the scale was px-based and the root was pinned to 14px. Nothing reflows; the scale simply became responsive to user preference. 0.6875rem = 11px 1.125rem = 18px 0.75rem = 12px 1.375rem = 22px 0.875rem = 14px 1.75rem = 28px 1rem = 16px 2.25rem = 36px */ --text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* Display tier — did not previously exist, so any oversized number or marketing headline was hardcoded (e.g. a bare `3rem` in ab-report). */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ /* ---- Page hero (.mc-banner) type scale ---- The hero markup is duplicated across ~46 page templates, so its sizing is centralised here instead: change these four tokens and every page hero resizes at once. Point them at any --text-* step (or a raw rem value) — nothing else needs editing. Overridden smaller on mobile in components.css. */ --banner-title-size: var(--text-lg); /* boxed variant — was --text-xl */ --banner-title-size-open: var(--text-xl); /* open variant — was --text-2xl */ --banner-desc-size: var(--text-base); --banner-meta-size: var(--text-sm); /* Weights. Previously --weight-bold was 600 — identical to --weight-semibold — so the type system had no bold tier at all and every "bold" element rendered at semibold. --weight-black was likewise mislabelled at 700. Both are corrected; Inter ships the needed weights. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Line heights */ --leading-none: 1; --leading-display: 1.15; /* 36px+ display type */ --leading-tight: 1.25; --leading-snug: 1.35; /* card/section headings */ --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing (tracking). Previously absent as a concept: 88 hardcoded letter-spacing values across 10 distinct magnitudes, every one of them POSITIVE. Positive tracking is right for small uppercase labels, but large text needs NEGATIVE tracking — as a headline grows, the optical gaps between glyphs grow with it and the word stops reading as one shape. Setting display type at 0 tracking is the clearest single tell of a non- premium type system. --tracking-wider matches the 0.04em already used by 27 uppercase label rules, so those become a token substitution with no visual change. */ --tracking-tighter: -0.03em; /* 36px+ display */ --tracking-tight: -0.02em; /* 22-28px headings */ --tracking-snug: -0.01em; /* 16-20px headings */ --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.04em; /* uppercase labels, eyebrows */ --tracking-widest: 0.08em; /* ================================================================ SPACING — 4px base, 8pt-grid aligned ================================================================ */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ================================================================ BORDER RADIUS ================================================================ */ --radius-xs: 4px; /* tight chips, inline tags */ --radius-sm: 6px; /* small badges, tags */ --radius-input: 8px; /* inputs, buttons, alerts */ --radius-md: 10px; /* nested surfaces */ --radius-card: 12px; /* cards, modals, dropdowns */ --radius-lg: 16px; /* large panels */ --radius-xl: 20px; /* hero/feature surfaces */ --radius-full: 9999px; /* pills, avatars, circles */ /* ================================================================ SHADOWS — layered elevation. Tinted with the 900 neutral (#101828), never pure black: a black shadow over a cool surface reads muddy, a tinted one reads as depth. Previously these were effectively invisible (0.03–0.04 alpha), so cards never lifted off the page. ================================================================ */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px -1px rgba(16, 24, 40, 0.06); --shadow-card: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-dropdown: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-modal: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18); /* Focus ring — one definition, used by every interactive component */ --focus-ring: 0 0 0 4px var(--color-teal-ring); --focus-ring-error: 0 0 0 4px var(--color-error-ring); /* ================================================================ LAYOUT ================================================================ */ --input-height: 44px; --sidebar-width: 240px; --sidebar-collapsed: 60px; --topbar-height: 56px; --content-max-width: 1200px; /* ================================================================ TRANSITIONS ================================================================ */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ================================================================ Z-INDEX ================================================================ */ --z-dropdown: 100; --z-sidebar: 200; --z-topbar: 300; --z-side-panel-backdrop: 350; --z-side-panel: 360; --z-modal-backdrop: 400; --z-modal: 500; /* Toast must outrank every overlay so it stays visible no matter what's open. Bumped above flow-lib's hardcoded sidebar (901) and modal (1100) — previously at 600 it was hidden behind the editor sidebar, so error toasts (e.g. "Subject is required") rendered under the panel and silently disappeared. */ --z-toast: 2000; --z-tooltip: 700; /* ================================================================ COMPATIBILITY ALIASES ---------------------------------------------------------------- Several components were authored against token names that were never declared — a var() with no fallback resolves to nothing, so those declarations silently did nothing (wrong background, missing border, unstyled text). Auditing every var() reference across public/refactor/css surfaced 28 such names. Rather than edit ~30 call sites across 8 stylesheets, the drifted names are declared here as aliases of the canonical token. Because custom properties resolve lazily at use time, each alias inherits the dark-mode and colour-scheme overrides automatically — there is no need to repeat them in every theme block. These are compatibility shims, not new API. Prefer the canonical name on the right in new work. NOT aliased (correctly dynamic, set per element at runtime): --ring-pct, --ring-color, --chip-tone, --chip-ink, --avatar-color-N. ================================================================ */ /* surfaces */ --color-bg: var(--color-page-bg); --color-bg-hover: var(--color-hover-bg); --color-bg-muted: var(--color-active-bg); --color-bg-secondary: var(--color-subtle-bg); --color-surface: var(--color-card-bg); --color-surface-hover: var(--color-hover-bg); --color-surface-secondary: var(--color-subtle-bg); /* borders */ --color-border-light: var(--color-border); --color-border-subtle: var(--color-border); --color-border-emphasis: var(--color-border-strong); /* text */ --color-text-base: var(--color-text); --color-text-primary: var(--color-text); --color-text-tertiary: var(--color-text-disabled); --color-link: var(--color-teal); --color-text-link: var(--color-teal); /* status / brand */ --color-danger: var(--color-error); --color-teal-dark: var(--color-teal-active); /* These three were referenced with hardcoded teal fallbacks (rgba(0,128,128,.08), rgba(0,153,153,.04)) and never declared, so the fallback was what actually painted — genuine Mailchimp teal still leaking into ab-test panels, upload zones and asset rows. Declaring them retires the last live traces of the old identity. */ --color-teal-bg: var(--color-teal-light); --color-teal-subtle: var(--color-teal-light); --color-teal-soft: var(--color-teal-ring); /* typography */ --font-size-sm: var(--text-sm); --font-size-base: var(--text-base); --font-size-md: var(--text-md); --font-weight-medium: var(--weight-medium); --font-weight-semibold: var(--weight-semibold); --weight-regular: var(--weight-normal); /* misc */ --space-0h: var(--space-0-5); --shadow-popover: var(--shadow-dropdown); --transition-normal: var(--transition-base); /* chart tints 7-8 — the -bg series stopped at 6 while --chart-7/8 existed, so any component using them had no tint surface. */ --chart-7-bg: #ECFEFF; --chart-8-bg: #F7FEE7; } /* ========================================================================== THEME-AWARE LOGO mc-logo-light = shown in light theme (dark logo on light bg) mc-logo-dark = shown in dark theme (light logo on dark bg) ========================================================================== */ .mc-logo-dark { display: none; } .mc-logo-light { display: inline; } [data-theme="dark"] .mc-logo-dark { display: inline; } [data-theme="dark"] .mc-logo-light { display: none; } /* ========================================================================== DARK MODE Cool near-black rather than pure black. Pure #000/#0A0A0A on a cool UI reads as an unfinished surface; a slate-tinted near-black is what reads as intentional depth. ========================================================================== */ [data-theme="dark"] { --color-white: #12161F; --color-black: #F5F7FA; /* Text — high contrast for readability */ --color-text: #F5F7FA; --color-text-secondary: #C3CAD6; --color-text-muted: #8A94A6; --color-text-disabled: #5A6273; /* Surfaces */ --color-page-bg: #0A0D14; --color-card-bg: #12161F; --color-hover-bg: #171C27; --color-active-bg: #1D232F; --color-subtle-bg: #0E121A; --color-bg-subtle: #0E121A; --color-banner-bg: #171C27; /* Borders */ --color-border: #1F2633; --color-border-strong: #2E3746; --color-border-focus: #818CF8; /* SVG Illustration tokens — dark mode */ --illust-stroke: #2E3746; --illust-stroke-bold: #475467; --illust-fill: #171C27; --illust-bg: #0E121A; --illust-teal: rgba(129, 140, 248, 0.20); --illust-teal-bold: rgba(129, 140, 248, 0.38); --illust-chart-1: rgba(129, 140, 248, 0.28); --illust-chart-2: rgba(52, 211, 153, 0.28); --illust-chart-3: rgba(56, 189, 248, 0.28); --illust-chart-4: rgba(251, 191, 36, 0.28); --illust-chart-5: rgba(251, 113, 133, 0.28); --illust-chart-6: rgba(167, 139, 250, 0.28); /* Primary — lifted indigo for contrast on dark surfaces */ --color-teal: #818CF8; --color-teal-hover: #9BA5FA; --color-teal-active: #6366F1; --color-teal-ring: rgba(129, 140, 248, 0.22); --color-teal-light: rgba(129, 140, 248, 0.12); --color-primary-fg: #0A0D14; /* dark ink on the lifted primary */ /* Icon gradient — lifted so the sweep keeps contrast on dark surfaces */ --icon-gradient-from: #60A5FA; --icon-gradient-via: #818CF8; --icon-gradient-to: #E879F9; --icon-gradient-accent: #67E8F9; /* Status — lifted tones for dark bg */ --color-success: #47CD89; --color-success-dark: #75E0A7; --color-success-bg: rgba(71, 205, 137, 0.12); --color-success-border: rgba(71, 205, 137, 0.30); --color-success-ring: rgba(71, 205, 137, 0.22); --color-error: #F97066; --color-error-dark: #FDA29B; --color-error-bg: rgba(249, 112, 102, 0.12); --color-error-border: rgba(249, 112, 102, 0.30); --color-error-ring: rgba(249, 112, 102, 0.22); --color-warning: #FDB022; --color-warning-dark: #FEC84B; --color-warning-bg: rgba(253, 176, 34, 0.12); --color-warning-border: rgba(253, 176, 34, 0.30); --color-warning-ring: rgba(253, 176, 34, 0.22); --color-info: #53B1FD; --color-info-dark: #84CAFF; --color-info-bg: rgba(83, 177, 253, 0.12); --color-info-border: rgba(83, 177, 253, 0.30); --color-info-ring: rgba(83, 177, 253, 0.22); /* Messenger channel tones — dark mode ink overrides. The base hue (--msg-ch-{ch}) re-resolves automatically via the dark-mode --chart-N redefinitions; only the ink (label-on-tint) needs to flip to a lighter tone for WCAG AA contrast over the 18%-tinted chip bg on dark surface. */ --msg-ch-email-ink: #B9E6FE; /* light sky */ --msg-ch-sms-ink: #A6F4C5; /* light emerald */ --msg-ch-wa-ink: #FEDF89; /* light amber */ --msg-ch-tg-ink: #DDD6FE; /* light violet */ --msg-ch-multi-ink: #C7CBFE; /* light indigo */ /* Messenger conversation bubble tones — dark mode (W6). Lighter / desaturated variants so they still read as the same brand on dark surfaces while passing WCAG-AA against --color-text on the dark bubble bg. */ --bubble-tone-sms: #5EEAD4; /* light teal */ --bubble-tone-whatsapp: #6EE7B7; /* light WA green */ --bubble-tone-telegram: #7DD3FC; /* light TG blue */ --bubble-tone-email: #98A2B3; /* light neutral */ --bubble-bg-in: #171C27; --bubble-bg-out: rgba(129, 140, 248, 0.16); /* AI accent palette — dark-mode variants. Pastel bg becomes a low-alpha * tint over the dark surface (so the same-hue character is preserved * without burning brightness). Crisp fg flips to a lighter tint so it * still reads as "this hue" against the dark bg. */ --color-ai-violet-bg: rgba(139, 92, 246, 0.16); --color-ai-violet-fg: #C4B5FD; --color-ai-teal-bg: rgba(45, 212, 191, 0.16); --color-ai-teal-fg: #5EEAD4; --color-ai-orange-bg: rgba(251, 146, 60, 0.16); --color-ai-orange-fg: #FDBA74; --color-ai-green-bg: rgba(74, 222, 128, 0.16); --color-ai-green-fg: #86EFAC; --color-ai-indigo-bg: rgba(129, 140, 248, 0.16); --color-ai-indigo-fg: #A5B4FC; --color-overlay: rgba(3, 5, 10, 0.70); --color-overlay-heavy: rgba(3, 5, 10, 0.82); /* Chart colors — lifted for dark surfaces, same hue order as light */ --chart-1: #818CF8; --chart-2: #34D399; --chart-3: #38BDF8; --chart-4: #FBBF24; --chart-5: #FB7185; --chart-6: #A78BFA; --chart-7: #22D3EE; --chart-8: #A3E635; /* Chart background tints — dark-adapted */ --chart-1-bg: rgba(129, 140, 248, 0.14); --chart-2-bg: rgba(52, 211, 153, 0.14); --chart-3-bg: rgba(56, 189, 248, 0.14); --chart-4-bg: rgba(251, 191, 36, 0.14); --chart-5-bg: rgba(251, 113, 133, 0.14); --chart-6-bg: rgba(167, 139, 250, 0.14); --chart-7-bg: rgba(34, 211, 238, 0.14); --chart-8-bg: rgba(163, 230, 53, 0.14); /* Shadows — deeper, with a hairline top highlight so raised surfaces separate from the page even where shadow alone is imperceptible. */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-lg: 0 12px 20px -6px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-dropdown: 0 12px 20px -6px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-modal: 0 24px 40px -8px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-xl: 0 32px 56px -12px rgba(0, 0, 0, 0.75); } /* ========================================================================== COLOR SCHEMES — override --color-teal* per scheme data-color-scheme on alongside data-theme for light/dark. "default" uses :root brand values — no override needed. Each scheme also restores a tinted --color-teal-light; these were all flattened to #F0F0F0, which erased the scheme from every subtle surface. ========================================================================== */ /* --- Smooth transition helper (applied briefly during scheme switch) --- */ html.mc-scheme-transitioning, html.mc-scheme-transitioning *, html.mc-scheme-transitioning *::before, html.mc-scheme-transitioning *::after { transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important; } /* --- Blue / Ocean --- */ [data-color-scheme="blue"] { --color-teal: #175CD3; --color-teal-hover: #1849A9; --color-teal-active: #194185; --color-teal-ring: rgba(23, 92, 211, 0.14); --color-teal-light: #EFF8FF; --color-border-focus: #175CD3; --icon-gradient-from: #22B8F5; --icon-gradient-via: #2E90FA; --icon-gradient-to: #6172F3; --icon-gradient-accent: #22D3EE; } [data-theme="dark"][data-color-scheme="blue"] { --icon-gradient-from: #67E8F9; --icon-gradient-via: #53B1FD; --icon-gradient-to: #8098F9; --icon-gradient-accent: #A5F3FC; --color-teal: #53B1FD; --color-teal-hover: #84CAFF; --color-teal-active: #2E90FA; --color-teal-ring: rgba(83, 177, 253, 0.22); --color-teal-light: rgba(83, 177, 253, 0.12); --color-border-focus: #53B1FD; --color-page-bg: #080C14; /* near-black, blue undertone */ --color-subtle-bg: #0B1018; --color-bg-subtle: #0B1018; } /* --- Green / Forest --- */ [data-color-scheme="green"] { --color-teal: #079455; --color-teal-hover: #067647; --color-teal-active: #05603A; --color-teal-ring: rgba(7, 148, 85, 0.14); --color-teal-light: #ECFDF3; --color-border-focus: #079455; --icon-gradient-from: #15B79E; --icon-gradient-via: #17B26A; --icon-gradient-to: #66C61C; --icon-gradient-accent: #2ED3B7; } [data-theme="dark"][data-color-scheme="green"] { --icon-gradient-from: #2ED3B7; --icon-gradient-via: #47CD89; --icon-gradient-to: #A6EF67; --icon-gradient-accent: #5FE9D0; --color-teal: #47CD89; --color-teal-hover: #75E0A7; --color-teal-active: #16B364; --color-teal-ring: rgba(71, 205, 137, 0.22); --color-teal-light: rgba(71, 205, 137, 0.12); --color-border-focus: #47CD89; --color-page-bg: #08120D; /* near-black, green undertone */ --color-subtle-bg: #0B1611; --color-bg-subtle: #0B1611; } /* --- Brown / Amber --- */ [data-color-scheme="brown"] { --color-teal: #B54708; --color-teal-hover: #93370D; --color-teal-active: #7A2E0E; --color-teal-ring: rgba(181, 71, 8, 0.14); --color-teal-light: #FFFAEB; --color-border-focus: #B54708; --icon-gradient-from: #F79009; --icon-gradient-via: #EF6820; --icon-gradient-to: #E31B54; --icon-gradient-accent: #FDB022; } [data-theme="dark"][data-color-scheme="brown"] { --icon-gradient-from: #FDB022; --icon-gradient-via: #F38744; --icon-gradient-to: #FD6F8E; --icon-gradient-accent: #FEC84B; --color-teal: #FDB022; --color-teal-hover: #FEC84B; --color-teal-active: #F79009; --color-teal-ring: rgba(253, 176, 34, 0.22); --color-teal-light: rgba(253, 176, 34, 0.12); --color-border-focus: #FDB022; --color-page-bg: #120D08; /* near-black, warm undertone */ --color-subtle-bg: #16110B; --color-bg-subtle: #16110B; } /* --- Pink / Rose --- */ [data-color-scheme="pink"] { --color-teal: #C11574; --color-teal-hover: #9E165F; --color-teal-active: #851651; --color-teal-ring: rgba(193, 21, 116, 0.14); --color-teal-light: #FDF2FA; --color-border-focus: #C11574; --icon-gradient-from: #7A5AF8; --icon-gradient-via: #DD2590; --icon-gradient-to: #F63D68; --icon-gradient-accent: #EE46BC; } [data-theme="dark"][data-color-scheme="pink"] { --icon-gradient-from: #A48AFB; --icon-gradient-via: #EE46BC; --icon-gradient-to: #FD6F8E; --icon-gradient-accent: #F670C7; --color-teal: #EE46BC; --color-teal-hover: #F670C7; --color-teal-active: #DD2590; --color-teal-ring: rgba(238, 70, 188, 0.22); --color-teal-light: rgba(238, 70, 188, 0.12); --color-border-focus: #EE46BC; --color-page-bg: #120810; /* near-black, rose undertone */ --color-subtle-bg: #160B14; --color-bg-subtle: #160B14; } /* --- Grey / High Contrast --- */ [data-color-scheme="grey"] { --color-teal: #182230; --color-teal-hover: #101828; --color-teal-active: #0C111D; --color-teal-ring: rgba(24, 34, 48, 0.14); --color-teal-light: #F2F4F7; --color-border-focus: #182230; /* Monochrome by design — a tonal sweep, not a hue sweep, so the high-contrast scheme keeps its point. */ --icon-gradient-from: #667085; --icon-gradient-via: #344054; --icon-gradient-to: #101828; --icon-gradient-accent: #98A2B3; } [data-theme="dark"][data-color-scheme="grey"] { --icon-gradient-from: #EAECF0; --icon-gradient-via: #CFD4DC; --icon-gradient-to: #98A2B3; --icon-gradient-accent: #F2F4F7; --color-teal: #CFD4DC; --color-teal-hover: #EAECF0; --color-teal-active: #98A2B3; --color-teal-ring: rgba(207, 212, 220, 0.20); --color-teal-light: rgba(207, 212, 220, 0.10); --color-border-focus: #CFD4DC; --color-page-bg: #0A0D14; --color-subtle-bg: #0E121A; --color-bg-subtle: #0E121A; } /* --- White / Neutral --- */ [data-color-scheme="white"] { --color-teal: #475467; --color-teal-hover: #344054; --color-teal-active: #182230; --color-teal-ring: rgba(71, 84, 103, 0.14); --color-teal-light: #F9FAFB; --color-border-focus: #475467; /* Neutral scheme — tonal sweep only, see the grey scheme note. */ --icon-gradient-from: #98A2B3; --icon-gradient-via: #667085; --icon-gradient-to: #344054; --icon-gradient-accent: #CFD4DC; } [data-theme="dark"][data-color-scheme="white"] { --icon-gradient-from: #F2F4F7; --icon-gradient-via: #EAECF0; --icon-gradient-to: #CFD4DC; --icon-gradient-accent: #F9FAFB; --color-teal: #EAECF0; --color-teal-hover: #F9FAFB; --color-teal-active: #CFD4DC; --color-teal-ring: rgba(234, 236, 240, 0.18); --color-teal-light: rgba(234, 236, 240, 0.08); --color-border-focus: #EAECF0; --color-page-bg: #0C111D; --color-subtle-bg: #101828; --color-bg-subtle: #101828; }