/** * MLS Genie — Design Tokens * * Single source of truth for all brand and UI colors, spacing, and scale. * Every other MLSG stylesheet declares this as a dependency and references * these vars — no raw hex values in component files. * * Structure: * 1. Brand — Teal (primary), Navy (secondary), and derived highlight tints * 2. Text * 3. Surfaces * 4. Borders * 5. Status — Danger, Success, Warning, Info, Purple * 6. WordPress admin palette * 7. Google sign-in (brand-locked) * 8. Scale / misc * * @package MLS_Genie * @since 1.3.43 */ :root { /* ------------------------------------------------------------------------- 1. BRAND Three core brand colors: Teal (primary action), Navy (secondary/text), and Neutral. All interactive highlights are derived from Teal. -------------------------------------------------------------------------- */ /* -- Teal: primary action, links, interactive highlights -- */ --mlsg-teal: #107dbd; /* primary action / link / focus */ --mlsg-teal-dark: #0d6da3; /* hover / pressed state */ --mlsg-teal-deeper: #0a5a8a; /* deep emphasis / active border */ --mlsg-teal-bg: #e8f4fb; /* teal-tinted surface (selected, hover) */ --mlsg-teal-bg-light: #f0f7fd; /* lightest teal tint (subtle highlight) */ --mlsg-teal-border: #b3d9f0; /* teal-tinted border */ /* -- Brand highlight tints (derived from teal, for selections/focus) -- */ --mlsg-highlight-bg: #e8f4fb; /* selected row, active card bg */ --mlsg-highlight-border: #7ec4e8; /* focused input, selected border */ --mlsg-highlight-text: #107dbd; /* highlighted text / active label */ /* -- Navy: secondary brand, headings, deep surfaces -- */ --mlsg-navy: #1a2633; /* primary brand navy / heading text */ --mlsg-navy-deep: #0f172a; /* shell / PWA deep background */ --mlsg-navy-mid: #1e293b; /* mid-depth surface */ /* ------------------------------------------------------------------------- 2. TEXT Five-step scale from primary to faint. Use the step that matches the visual weight needed — avoid adding new steps. -------------------------------------------------------------------------- */ --mlsg-text: #111827; /* primary — headings, strong body */ --mlsg-text-medium: #374151; /* secondary — body copy, field values */ --mlsg-text-secondary: #4b5563; /* tertiary — labels, captions */ --mlsg-text-muted: #6b7280; /* muted — placeholders, timestamps */ --mlsg-text-subtle: #9ca3af; /* subtle — disabled, metadata */ --mlsg-text-slate: #64748b; /* slate-tone utility (tags, breadcrumbs) */ /* ------------------------------------------------------------------------- 3. SURFACES Page backgrounds, card surfaces, and inset areas. -------------------------------------------------------------------------- */ --mlsg-white: #ffffff; --mlsg-on-brand: #ffffff; /* always white — text on colored buttons/badges */ --mlsg-bg: #f9fafb; /* standard page / card background */ --mlsg-bg-subtle: #f3f4f6; /* inset surface, striped rows */ --mlsg-bg-light: #f1f5f9; /* light slate surface */ --mlsg-bg-slate: #f8fafc; /* slate-50, lightest surface */ --mlsg-bg-bare: #fafafa; /* near-white bare surface */ /* ------------------------------------------------------------------------- 4. BORDERS -------------------------------------------------------------------------- */ --mlsg-border: #e5e7eb; /* standard border */ --mlsg-border-light: #d1d5db; /* light separator / table rule */ --mlsg-border-medium: #e2e8f0; /* form field border */ --mlsg-border-slate: #cbd5e1; /* slate-300, subtle divider */ /* ------------------------------------------------------------------------- 5. STATUS COLORS Semantic colors for system states. Each status has a full set: text (dark), action (base), background (bg), border. -------------------------------------------------------------------------- */ /* -- Danger -- */ --mlsg-danger: #dc2626; /* error text / icon */ --mlsg-danger-dark: #b91c1c; /* hover / pressed danger */ --mlsg-danger-bg: #fef2f2; /* danger surface */ --mlsg-danger-bg-lt: #fff5f5; /* lightest danger surface */ --mlsg-danger-border: #fecaca; /* danger border */ /* -- Success -- */ --mlsg-success: #059669; /* success text / icon (emerald-600) */ --mlsg-success-dark: #065f46; /* hover / pressed success */ --mlsg-success-bg: #ecfdf5; /* success surface (emerald-50) */ --mlsg-success-bg-mid: #d1fae5; /* mid success surface (emerald-100) */ --mlsg-success-border: #86efac; /* success border */ /* -- Warning -- */ --mlsg-warning: #b45309; /* warning text / icon (amber-700) */ --mlsg-warning-dark: #92400e; /* hover / pressed warning (amber-800) */ --mlsg-warning-accent: #dba617; /* warning accent / admin border */ --mlsg-warning-bg: #fffbeb; /* warning surface (amber-50) */ --mlsg-warning-border: #fcd34d; /* warning border (amber-300) */ /* -- Info -- */ --mlsg-info: #2563eb; /* info text / icon */ --mlsg-info-dark: #1e40af; /* hover / pressed info */ --mlsg-info-deep: #1d4ed8; /* deep info text (blue-700) */ --mlsg-info-bg: #eff6ff; /* info surface */ --mlsg-info-bg-deep: #dbeafe; /* mid info surface */ --mlsg-info-border: #bfdbfe; /* info border */ /* -- Purple (drip campaigns, scheduled states) -- */ --mlsg-purple: #6b21a8; /* purple text / icon */ --mlsg-purple-bg: #f3e8ff; /* purple surface */ --mlsg-purple-border: #d8b4fe; /* purple border */ /* ------------------------------------------------------------------------- 6. WORDPRESS ADMIN PALETTE Used only in admin-scoped stylesheets. Do not use in frontend shell. -------------------------------------------------------------------------- */ --mlsg-wp-border: #dcdcde; --mlsg-wp-border-lt: #ccd0d4; --mlsg-wp-text: #1d2327; --mlsg-wp-text-dark: #23282d; --mlsg-wp-muted: #50575e; --mlsg-wp-separator: #444444; --mlsg-wp-red: #d63638; --mlsg-wp-green: #00a32a; --mlsg-wp-blue: #72aee6; /* ------------------------------------------------------------------------- 7. GOOGLE SIGN-IN Brand-locked — do not change these values. -------------------------------------------------------------------------- */ --mlsg-google-text: #3c4043; --mlsg-google-border: #dadce0; --mlsg-google-blue: #0284c7; /* ------------------------------------------------------------------------- 8. SCALE / MISC -------------------------------------------------------------------------- */ /* Font scale — set by JS from localStorage, applied via zoom on shell content. small = 1 (default), medium = 1.25, large = 1.5 */ --mlsg-font-scale: 1; } /* ============================================================================= DARK MODE TOKEN OVERRIDES Applied when carries .mlsg-dark (set via JS, stored in localStorage under key 'mlsg_theme'). Only tokens that differ in dark mode are listed here. ============================================================================= */ body.mlsg-shell.mlsg-dark { /* Brand */ --mlsg-teal-bg: #0d2d40; --mlsg-teal-bg-light: #071e2b; --mlsg-teal-border: #1a5a80; --mlsg-highlight-bg: #0d2d40; --mlsg-highlight-border: #1a6fa0; --mlsg-navy: #e2e8f0; --mlsg-navy-deep: #0f172a; --mlsg-navy-mid: #1e293b; /* Text */ --mlsg-text: #f1f5f9; --mlsg-text-medium: #cbd5e1; --mlsg-text-secondary: #94a3b8; --mlsg-text-muted: #94a3b8; /* upgraded: #64748b was 3.75:1, now 6.96:1 */ --mlsg-text-subtle: #7c8fa3; /* upgraded: #475569 was 1.93:1, now 5.37:1 */ --mlsg-text-slate: #94a3b8; /* Surfaces */ --mlsg-white: #1e293b; --mlsg-bg: #0f172a; --mlsg-bg-subtle: #1e293b; --mlsg-bg-light: #1e293b; --mlsg-bg-slate: #1e293b; --mlsg-bg-bare: #172032; /* Borders */ --mlsg-border: #2d3f52; --mlsg-border-light: #2d3f52; --mlsg-border-medium: #2d3f52; --mlsg-border-slate: #334155; /* Status — darkened surfaces for dark mode */ --mlsg-danger: #f87171; /* red-400: 6.45:1 on dark bg */ --mlsg-danger-bg: #2d1515; --mlsg-danger-bg-lt: #1f0d0d; --mlsg-danger-border: #7f1d1d; --mlsg-danger-bg-lt: #1f0d0d; --mlsg-success: #6ee7b7; /* emerald-300: 4.74:1 on dark bg */ --mlsg-success-bg: #052e1a; --mlsg-success-bg-mid: #0a3d22; --mlsg-success-border: #065f46; --mlsg-warning: #fbbf24; /* amber-400: 10.69:1 on dark bg */ --mlsg-warning-bg: #2d1f05; --mlsg-warning-border: #78350f; --mlsg-info: #60a5fa; /* blue-400: 7.02:1 on dark bg */ --mlsg-info-bg: #0d1f3f; --mlsg-info-bg-deep: #1e3a6e; --mlsg-info-border: #1e40af; --mlsg-purple: #c084fc; /* purple-400: 6.76:1 on dark bg */ --mlsg-purple-bg: #1e0a35; --mlsg-purple-border: #581c87; /* Shell-specific */ --shell-surface: #1a2c3d; --shell-bg: #0f172a; --shell-text: #e2e8f0; --shell-muted: #94a3b8; --shell-border: #2d3f52; }