/* ============================================================ Meridien v2 — shared design tokens (Phase 4 foundation) One source of truth for color, type, space, shape, elevation across CRM / Trader / Landing. Declarations only: this file repaints nothing by itself — components opt in via var(). Color modes: set data-m-theme on or : dark | royal | gold | light These replace the v1 triplicated --luxe-* / --theme-* namespaces; v1 vars alias onto these during migration. ============================================================ */ :root { /* ---- brand primitives (the marque) ---- */ --m-teal-950: #031011; --m-teal-900: #083d3a; --m-teal-800: #0d5450; --m-teal-700: #0f766e; /* primary anchor — all three apps */ --m-teal-500: #14b8a6; --m-teal-400: #2dd4bf; /* bright accent — landing/luxe */ --m-teal-300: #5eead4; --m-teal-200: #99f6e4; --m-indigo-700: #4338ca; --m-indigo-600: #4f46e5; --m-indigo-500: #6366f1; /* secondary — landing accent-2 */ --m-indigo-400: #818cf8; --m-blue-600: #2563eb; /* trader secondary */ --m-sky-400: #38bdf8; /* v1 CRM link/info — retained */ /* ---- neutral ramp (slate — CRM's existing dominant family) ---- */ --m-slate-25: #f8fafc; --m-slate-50: #f1f5f9; --m-slate-100: #e2e8f0; --m-slate-200: #cbd5e1; --m-slate-400: #94a3b8; --m-slate-500: #64748b; --m-slate-600: #475569; --m-slate-700: #334155; --m-slate-800: #1e293b; --m-slate-900: #0f172a; --m-slate-950: #020617; /* ---- status ---- */ --m-up: #16c784; /* market up (landing) */ --m-down: #ea3943; /* market down (landing) */ --m-success: #22c55e; --m-warning: #f59e0b; --m-danger: #ef4444; --m-info: #38bdf8; /* ---- typography ---- */ --m-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --m-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --m-text-xs: 0.75rem; --m-text-sm: 0.875rem; --m-text-base: 1rem; --m-text-lg: 1.125rem; --m-text-xl: 1.375rem; --m-text-2xl: 1.75rem; --m-text-3xl: 2.25rem; --m-leading-tight: 1.25; --m-leading-normal: 1.5; --m-weight-regular: 400; --m-weight-medium: 500; --m-weight-bold: 700; /* table type scale (principles.md §6): ONE header voice, two densities. Theme chapters may re-ink headers; they may not re-size or re-weight them. */ --m-th-size: 0.72rem; --m-th-weight: 650; --m-th-track: 0.05em; --m-th-ink: var(--m-text-muted); /* resolves per theme at use time */ --m-td-size: 0.85rem; --m-td-lh: 1.3; --m-td-size-compact: 0.8rem; /* ---- spacing (4px base) ---- */ --m-space-1: 4px; --m-space-2: 8px; --m-space-3: 12px; --m-space-4: 16px; --m-space-5: 20px; --m-space-6: 24px; --m-space-8: 32px; --m-space-10: 40px; --m-space-12: 48px; /* ---- shape (collapses v1's 14+ radius values) ---- */ --m-radius-sm: 6px; --m-radius: 8px; --m-radius-lg: 12px; --m-radius-xl: 20px; --m-radius-pill: 999px; /* ---- elevation ---- */ --m-shadow-1: 0 1px 2px rgba(2, 6, 23, 0.24); --m-shadow-2: 0 4px 12px rgba(2, 6, 23, 0.28); --m-shadow-3: 0 12px 32px rgba(2, 6, 23, 0.38); --m-glow-accent: 0 0 24px rgba(45, 212, 191, 0.35); /* ---- motion ---- */ --m-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --m-dur-fast: 120ms; --m-dur: 200ms; --m-dur-slow: 320ms; /* ---- the marque gradient (trader AppBar heritage) ---- */ --m-brand-gradient: linear-gradient(120deg, #071922 0%, #0f2f35 55%, var(--m-teal-700) 100%); } /* ---- semantic surface tokens: DARK is the reference mode ---- */ :root, [data-m-theme='dark'] { --m-bg: #070a11; /* landing --bg */ --m-bg-2: #0b0f1a; --m-surface: #111726; --m-surface-2: #151c2d; --m-surface-3: #1b2538; --m-border: rgba(255, 255, 255, 0.07); --m-border-strong: rgba(255, 255, 255, 0.14); --m-text: #e9edf6; --m-text-muted: #97a0b5; --m-text-dim: #5d6781; --m-accent: var(--m-teal-400); --m-accent-strong: var(--m-teal-500); --m-primary: var(--m-teal-400); --m-secondary: var(--m-indigo-500); --m-color-scheme: dark; /* surface ladder rungs (principles.md §3): wash = table containers/insets, cell = tbody grounds, row = list rows/tiles. Base CSS consumes them as var(--token, ) so non-v2 rendering is byte-identical. */ --m-wash: rgba(15, 23, 42, 0.20); --m-wash-border: rgba(148, 163, 184, 0.16); --m-cell: rgba(15, 23, 42, 0.16); --m-row: rgba(15, 23, 42, 0.38); --m-canvas-mid: #111827; /* The chip the click-to-call vendor marks sit on. A deliberate exception to the surface ladder: it is not a rung but a fixed near-white ground, because Squaretalk's crimson and Voiso's pink-to-blue gradient are the vendors' own colours and cannot be re-tinted per theme. Gold and light re-cut it so the chip stays a chip (see surface-recipes: warm family on gold). */ --m-c2c-plate: rgba(255, 255, 255, 0.94); /* one-step hover lift: depth + on-brand glow (light overrides to an elevation lift) */ --m-shadow-hover: 0 5px 14px rgba(2, 6, 23, 0.30), 0 -4px 9px 0 rgba(45, 212, 191, 0.72), 5px 4px 10px 0 rgba(139, 92, 246, 0.62), -5px 4px 10px 0 rgba(56, 189, 248, 0.56), 7px -4px 10px 0 rgba(255, 138, 34, 0.78); } /* royal = violet/indigo premium (v1 crm-theme-royal, trader royal) */ [data-m-theme='royal'] { --m-bg: #0c0a1d; --m-bg-2: #110e26; --m-surface: #171331; --m-surface-2: #1c173c; --m-surface-3: #221c49; --m-border: rgba(165, 180, 252, 0.12); --m-border-strong: rgba(165, 180, 252, 0.22); --m-text: #eceafc; --m-text-muted: #a5a3c8; --m-text-dim: #6d6b96; --m-accent: var(--m-indigo-400); --m-accent-strong: var(--m-indigo-600); --m-primary: var(--m-indigo-500); --m-secondary: var(--m-teal-400); --m-color-scheme: dark; /* indigo-family rungs — slate grounds are a defect on tinted themes */ --m-wash: rgba(12, 10, 29, 0.38); --m-wash-border: rgba(165, 180, 252, 0.14); --m-cell: rgba(12, 10, 29, 0.26); --m-row: rgba(12, 10, 29, 0.46); --m-canvas-mid: #14112e; --m-c2c-plate: rgba(255, 255, 255, 0.94); --m-shadow-hover: 0 5px 14px rgba(2, 6, 23, 0.30), 0 -4px 9px 0 rgba(45, 212, 191, 0.72), 5px 4px 10px 0 rgba(139, 92, 246, 0.62), -5px 4px 10px 0 rgba(56, 189, 248, 0.56), 7px -4px 10px 0 rgba(255, 138, 34, 0.78); } /* gold = luxe (v1 crm-theme-gold, trader luxe) */ [data-m-theme='gold'] { --m-bg: #16120a; --m-bg-2: #1a150c; --m-surface: #211a10; --m-surface-2: #272013; --m-surface-3: #2e2617; --m-border: rgba(214, 169, 77, 0.14); --m-border-strong: rgba(214, 169, 77, 0.26); --m-text: #f3ecdd; --m-text-muted: #c0b394; --m-text-dim: #877a5c; --m-accent: #d6a94d; --m-accent-strong: #9a6b1f; --m-primary: #d6a94d; --m-secondary: var(--m-teal-400); --m-color-scheme: dark; /* warm-family rungs (gold hue composited over the theme base — Material tinted-surface method). The blue cast John flagged came from slate/navy literals; every large gold ground routes through these instead. */ --m-wash: rgba(20, 15, 6, 0.42); --m-wash-border: rgba(214, 169, 77, 0.16); --m-cell: rgba(22, 17, 8, 0.30); --m-row: rgba(22, 17, 8, 0.50); --m-canvas-mid: #1a150c; /* warm white, not blue-white: a 255,255,255 chip reads cold against gold */ --m-c2c-plate: rgba(255, 251, 242, 0.95); --m-sidebar-deep: rgba(20, 15, 7, 0.98); --m-input-bg: rgba(18, 14, 7, 0.78); --m-table-ground: rgba(14, 11, 5, 0.50); --m-shadow-hover: 0 5px 14px rgba(2, 6, 23, 0.30), 0 -4px 9px 0 rgba(45, 212, 191, 0.72), 5px 4px 10px 0 rgba(139, 92, 246, 0.62), -5px 4px 10px 0 rgba(56, 189, 248, 0.56), 7px -4px 10px 0 rgba(255, 138, 34, 0.78); } /* light = porcelain daylight (fresh 2026-07-10 build — no code shared with the retired 2026-07 light theme). Content surfaces go bright with near-black slate ink; the sidebar alone keeps the dark marque (its ink is pinned locally — Live Vibe and the telephony cards went light in R9). Muted ink sits at slate-600 weight (7.7:1 on white) — the retired theme's washed-out look came from slate-400/500 labels; nothing here is below 4.5:1. */ [data-m-theme='light'] { --m-bg: #eef2f7; --m-bg-2: #e7edf5; --m-surface: #ffffff; --m-surface-2: #f4f7fb; --m-surface-3: #e9eef6; --m-border: rgba(15, 23, 42, 0.12); --m-border-strong: rgba(15, 23, 42, 0.22); --m-text: #0f1b2d; --m-text-muted: #46536e; --m-text-dim: #64748b; --m-accent: var(--m-teal-700); --m-accent-strong: var(--m-teal-800); --m-primary: var(--m-teal-700); --m-secondary: var(--m-indigo-600); --m-color-scheme: light; /* elevation flips from black plumes to soft slate */ --m-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08); --m-shadow-2: 0 4px 14px rgba(15, 23, 42, 0.10); --m-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.16); --m-glow-accent: 0 0 24px rgba(15, 118, 110, 0.18); /* status colors deepen to their 600/700 series so text holds on white */ --m-success: #15803d; --m-warning: #b45309; --m-danger: #dc2626; --m-info: #0369a1; --m-up: #047857; --m-down: #dc2626; /* ink hooks for 00-base's blanket element rule (dark themes use the var() fallbacks there and render byte-identical; only light sets these) */ --m-ink: var(--m-text); --m-ink-muted: var(--m-text-muted); --m-ink-link-hover: #0369a1; --m-ink-success: #15803d; --m-ink-warning: #a16207; --m-ink-danger: #b91c1c; --m-ink-info: #0369a1; /* CTA ink hook: only light defines it; dark themes resolve the var() fallback in v2-shell and render byte-identical */ --m-ink-cta: #ffffff; /* surface ladder rungs: light tables sit on a whisper of slate over white (td composites to ≈#f6f8fa — the old defect kept the dark literal ≈#d6d9de) */ --m-wash: rgba(15, 23, 42, 0.05); --m-wash-border: rgba(15, 23, 42, 0.10); --m-cell: rgba(15, 23, 42, 0.035); --m-row: rgba(15, 23, 42, 0.045); --m-canvas-mid: #f3f6fb; /* pure white would vanish into the row; the chip goes one rung down and earns its edge from the hairline ring in 50-forms-buttons.css */ --m-c2c-plate: #ffffff; /* hover = elevation lift + hairline accent ring, NOT a halo (a colored glow is invisible on porcelain; see principles.md §2) */ --m-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 -4px 8px 0 rgba(13, 148, 136, 0.55), 5px 4px 9px 0 rgba(124, 58, 237, 0.48), -5px 4px 9px 0 rgba(2, 132, 199, 0.45), 7px -4px 9px 0 rgba(249, 115, 22, 0.60); } /* ---- micro-utilities (the only selectors in this file) ---- */ .m-tabular { font-variant-numeric: tabular-nums; font-family: var(--m-font-mono); } .m-skeleton { background: linear-gradient(90deg, var(--m-surface-2) 25%, var(--m-surface-3) 50%, var(--m-surface-2) 75%); background-size: 200% 100%; animation: m-shimmer 1.4s var(--m-ease) infinite; border-radius: var(--m-radius-sm); color: transparent; } @keyframes m-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .m-skeleton { animation: none; } } /* ---- v1 compat aliases: the --luxe-* namespace now RESOLVES FROM TOKENS. Definitions and the per-combo remap were removed from style.css; these vary with data-m-theme automatically (replaces the royal/gold remap). ---- */ :root, [data-m-theme] { --luxe-bg: var(--m-bg); --luxe-bg-2: var(--m-bg-2); --luxe-panel: var(--m-surface); --luxe-panel-strong: var(--m-surface-2); --luxe-border: var(--m-border-strong); --luxe-border-strong: rgba(45, 212, 191, 0.42); --luxe-text: var(--m-text); --luxe-muted: var(--m-text-muted); --luxe-faint: var(--m-text-dim); --luxe-teal: var(--m-accent); --luxe-cyan: #22d3ee; --luxe-green: var(--m-up); --luxe-violet: var(--m-indigo-500); --luxe-rose: #fb7185; --luxe-amber: var(--m-warning); --luxe-shadow: var(--m-shadow-3); --luxe-glow: var(--m-glow-accent); } /* ---- layer scale (z-index tokens) ---- */ :root { --m-z-nav: 1030; --m-z-dropdown: 1100; --m-z-modal: 1500; --m-z-toast: 1700; --m-z-tooltip: 1800; } /* ---- v1 compat: --theme-* now resolves from tokens too. Definitions removed from style.css; -rgb pairs get per-mode triplets. ---- */ :root, [data-m-theme] { --theme-bg: var(--m-bg); --theme-panel: var(--m-surface); --theme-panel-strong: var(--m-surface-2); --theme-border: var(--m-border); --theme-border-strong: var(--m-border-strong); --theme-text: var(--m-text); --theme-muted: var(--m-text-muted); --theme-faint: var(--m-text-dim); --theme-accent: var(--m-primary); --theme-accent-2: var(--m-secondary); --theme-warning: var(--m-warning); --theme-button-text: #0b1220; --theme-accent-rgb: 45, 212, 191; --theme-accent-2-rgb: 99, 102, 241; } [data-m-theme='royal'] { --theme-accent-rgb: 129, 140, 248; --theme-accent-2-rgb: 45, 212, 191; } [data-m-theme='gold'] { --theme-accent-rgb: 214, 169, 77; --theme-accent-2-rgb: 45, 212, 191; } [data-m-theme='light'] { --theme-accent-rgb: 15, 118, 110; --theme-accent-2-rgb: 79, 70, 229; /* deep teal/indigo accents need white CTA ink (dark ink reads ~1.5:1 there) */ --theme-button-text: #ffffff; /* luxe literal accents deepen for white grounds */ --luxe-border-strong: rgba(15, 118, 110, 0.38); --luxe-cyan: #0e7490; --luxe-rose: #be123c; } /* ---- client status tokens (v4): ONE source of truth for every status color. Consumed by .status-badge/.status-* (40-components) and .status-select.* (30-tables-data) — the two palettes diverged for years; canonical = badge. Dark themes keep bright foregrounds so pills stay readable on dark surfaces. */ :root { --status-default-fg: #cbd5e1; --status-default-bg: rgba(148,163,184,0.12); --status-default-ring: rgba(148,163,184,0.28); --status-new-fg: #38bdf8; --status-new-bg: rgba(56,189,248,0.15); --status-new-ring: rgba(56,189,248,0.3); --status-interested-fg: #22c55e; --status-interested-bg: rgba(34,197,94,0.15); --status-interested-ring: rgba(34,197,94,0.3); --status-not-interested-fg: #ef4444; --status-not-interested-bg: rgba(239,68,68,0.15); --status-not-interested-ring: rgba(239,68,68,0.3); --status-lost-client-fg: #ef4444; --status-lost-client-bg: rgba(239,68,68,0.15); --status-lost-client-ring: rgba(239,68,68,0.3); --status-voicemail-fg: #fbbf24; --status-voicemail-bg: rgba(251,191,36,0.15); --status-voicemail-ring: rgba(251,191,36,0.3); --status-no-answer-fg: #94a3b8; --status-no-answer-bg: rgba(100,116,139,0.15); --status-no-answer-ring: rgba(100,116,139,0.3); --status-transferred-to-retention-fg: #a855f7; --status-transferred-to-retention-bg: rgba(168,85,247,0.15); --status-transferred-to-retention-ring: rgba(168,85,247,0.3); --status-broke-fg: #f97316; --status-broke-bg: rgba(180,83,9,0.15); --status-broke-ring: rgba(180,83,9,0.3); --status-wrong-person-fg: #818cf8; --status-wrong-person-bg: rgba(99,102,241,0.15); --status-wrong-person-ring: rgba(99,102,241,0.3); --status-low-potential-fg: #fb923c; --status-low-potential-bg: rgba(251,146,60,0.15); --status-low-potential-ring: rgba(251,146,60,0.3); --status-medium-potential-fg: #fbbf24; --status-medium-potential-bg: rgba(251,191,36,0.15); --status-medium-potential-ring: rgba(251,191,36,0.3); --status-high-potential-fg: #22c55e; --status-high-potential-bg: rgba(34,197,94,0.15); --status-high-potential-ring: rgba(34,197,94,0.3); /* Reassigned is a filter-only entry (never a value a lead carries), so this only ever paints its chip in the Leads status filter and Settings. */ --status-reassigned-fg: #2dd4bf; --status-reassigned-bg: rgba(45,212,191,0.15); --status-reassigned-ring: rgba(45,212,191,0.3); } /* Light mode: pill foregrounds drop to the 600/700 series (the dark themes' bright 400s wash out on white); grounds firm up slightly so pills still read as chips against white panels. */ [data-m-theme='light'] { --status-default-fg: #475569; --status-default-bg: rgba(71,85,105,0.10); --status-default-ring: rgba(71,85,105,0.30); --status-new-fg: #0369a1; --status-new-bg: rgba(2,132,199,0.12); --status-new-ring: rgba(2,132,199,0.34); --status-interested-fg: #15803d; --status-interested-bg: rgba(22,163,74,0.12); --status-interested-ring: rgba(22,163,74,0.34); --status-not-interested-fg: #b91c1c; --status-not-interested-bg: rgba(220,38,38,0.10); --status-not-interested-ring: rgba(220,38,38,0.30); --status-lost-client-fg: #b91c1c; --status-lost-client-bg: rgba(220,38,38,0.10); --status-lost-client-ring: rgba(220,38,38,0.30); --status-voicemail-fg: #a16207; --status-voicemail-bg: rgba(202,138,4,0.14); --status-voicemail-ring: rgba(202,138,4,0.36); --status-no-answer-fg: #475569; --status-no-answer-bg: rgba(100,116,139,0.12); --status-no-answer-ring: rgba(100,116,139,0.32); --status-transferred-to-retention-fg: #7e22ce; --status-transferred-to-retention-bg: rgba(147,51,234,0.10); --status-transferred-to-retention-ring: rgba(147,51,234,0.30); --status-broke-fg: #c2410c; --status-broke-bg: rgba(234,88,12,0.10); --status-broke-ring: rgba(234,88,12,0.30); --status-wrong-person-fg: #4f46e5; --status-wrong-person-bg: rgba(99,102,241,0.10); --status-wrong-person-ring: rgba(99,102,241,0.30); --status-low-potential-fg: #c2410c; --status-low-potential-bg: rgba(251,146,60,0.14); --status-low-potential-ring: rgba(251,146,60,0.34); --status-medium-potential-fg: #a16207; --status-medium-potential-bg: rgba(251,191,36,0.16); --status-medium-potential-ring: rgba(251,191,36,0.36); --status-high-potential-fg: #15803d; --status-high-potential-bg: rgba(34,197,94,0.12); --status-high-potential-ring: rgba(34,197,94,0.34); --status-reassigned-fg: #0f766e; --status-reassigned-bg: rgba(13,148,136,0.12); --status-reassigned-ring: rgba(13,148,136,0.34); }