/* ══════════════════════════════════════════════════════════════════ ART COMFORT CRM — Unified Theme System 3 themes: Copper (primary), Slate (neutral), Espresso (dark) Based on Sandbox token architecture + GLOBAL_DESIGN.md standards Usage: (default) Switch: document.documentElement.dataset.theme = 'slate' ══════════════════════════════════════════════════════════════════ */ /* ── Fonts (shared across all themes) ─────────────────────────── */ :root { --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Instrument Serif', Georgia, serif; --font-data: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Typography scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ /* Easing (from GLOBAL_DESIGN.md) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-decel: cubic-bezier(0, 0, 0.2, 1); --tr-fast: 150ms; --tr: 250ms; /* Layout */ --sidebar-w: 220px; --sidebar-collapsed-w: 56px; --header-h: 52px; --filter-w: 280px; } /* ══════════════════════════════════════════════════════════════════ THEME 1: COPPER — Warm, premium, brand-aligned Ref: Sandbox tokens, LEEROY copper, Cartier earth tones ══════════════════════════════════════════════════════════════════ */ [data-theme="copper"], :root { /* Backgrounds */ --bg: #F7F3EE; --bg-secondary: #F0EBE3; --bg-input: #FAF7F4; --surface: #FFFFFF; --surface-hover: #FFFDF9; --surface-inset: #EDE8E0; /* Accent */ --accent: #B87333; --accent-hover: #A36429; --accent-light: #F5E6D3; --accent-subtle: #FAF0E4; --accent-text: #9A5F2A; /* darker for WCAG on light bg */ /* Text */ --text: #2C2420; --text-secondary: #6B5E54; --text-muted: #9C8E82; --text-on-accent: #FFFFFF; --text-inverse: #FAF7F4; /* Borders */ --border: #E4DDD4; --border-subtle: #EDE8E0; --border-strong: #C9BFB3; --border-focus: #B87333; /* States */ --success: #6B8F71; --success-light: #EDF3EE; --warning: #C4912A; --warning-light: #FBF3E4; --error: #B85C5C; --error-light: #F9EDEC; --info: #6B8FA3; --info-light: #EEF3F6; /* Shadows (double-layer, warm-tinted — Stripe standard) */ --shadow-sm: 0 1px 3px 0 rgba(44,36,32,.06), 0 1px 2px -1px rgba(44,36,32,.04); --shadow-md: 0 4px 6px -1px rgba(44,36,32,.06), 0 2px 4px -2px rgba(44,36,32,.04); --shadow-lg: 0 10px 15px -3px rgba(44,36,32,.07), 0 4px 6px -4px rgba(44,36,32,.04); /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Sidebar */ --sidebar-bg: #2C2420; --sidebar-hover: #3A322C; --sidebar-active-border: #B87333; --sidebar-text: rgba(250,247,244,.65); --sidebar-text-hover: #FAF7F4; --sidebar-divider: rgba(250,247,244,.08); /* Scrollbar */ --scrollbar-thumb: #C9BFB3; --scrollbar-thumb-hover: #9C8E82; /* Channel colors (messenger — shared) */ --ch-max: #2787F5; --ch-telegram: #2AABEE; --ch-whatsapp: #25D366; --ch-email: #D4A853; --ch-b24: #2FC6F6; /* Escalation/Backstop */ --backstop-warn: #E8943A; --backstop-critical: #D44333; --note-bg: #FFF8E1; --note-border: #FFE082; } /* ══════════════════════════════════════════════════════════════════ THEME 2: SLATE — Cool neutral, softened black-white For users who prefer minimal, professional look ══════════════════════════════════════════════════════════════════ */ [data-theme="slate"] { /* Backgrounds */ --bg: #F8F9FB; --bg-secondary: #F1F3F5; --bg-input: #FAFBFC; --surface: #FFFFFF; --surface-hover: #FCFCFD; --surface-inset: #EDF0F3; /* Accent */ --accent: #6B8FA3; --accent-hover: #5A7B8E; --accent-light: #E4EEF3; --accent-subtle: #F0F5F8; --accent-text: #4E7287; /* Text */ --text: #334155; --text-secondary: #64748B; --text-muted: #94A3B8; --text-on-accent: #FFFFFF; --text-inverse: #F8FAFC; /* Borders */ --border: #E2E8F0; --border-subtle: #EDF1F5; --border-strong: #CBD5E1; --border-focus: #6B8FA3; /* States */ --success: #5B9A6F; --success-light: #ECF5EE; --warning: #D49A2A; --warning-light: #FBF5E4; --error: #C25555; --error-light: #FAEDED; --info: #5B8FAA; --info-light: #EBF3F8; /* Shadows (double-layer, cool-tinted) */ --shadow-sm: 0 1px 3px 0 rgba(51,65,85,.06), 0 1px 2px -1px rgba(51,65,85,.04); --shadow-md: 0 4px 6px -1px rgba(51,65,85,.07), 0 2px 4px -2px rgba(51,65,85,.04); --shadow-lg: 0 10px 15px -3px rgba(51,65,85,.08), 0 4px 6px -4px rgba(51,65,85,.04); /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Sidebar (warm dark slate, NOT pure black) */ --sidebar-bg: #2D3441; --sidebar-hover: #3B4454; --sidebar-active-border: #6B8FA3; --sidebar-text: rgba(248,250,252,.6); --sidebar-text-hover: #F8FAFC; --sidebar-divider: rgba(248,250,252,.08); /* Scrollbar */ --scrollbar-thumb: #CBD5E1; --scrollbar-thumb-hover: #94A3B8; /* Channel colors */ --ch-max: #2787F5; --ch-telegram: #2AABEE; --ch-whatsapp: #25D366; --ch-email: #D4A853; --ch-b24: #2FC6F6; /* Backstop */ --backstop-warn: #E8943A; --backstop-critical: #D44333; --note-bg: #FFF8E1; --note-border: #FFE082; } /* ══════════════════════════════════════════════════════════════════ THEME 3: ESPRESSO — Warm dark mode 60% of award sites use dark. Premium, evening-friendly. ══════════════════════════════════════════════════════════════════ */ [data-theme="espresso"] { /* Backgrounds */ --bg: #1C1917; --bg-secondary: #231F1C; --bg-input: #292524; --surface: #292524; --surface-hover: #322E2B; --surface-inset: #1C1917; /* Accent */ --accent: #D4A24E; --accent-hover: #C49340; --accent-light: rgba(212,162,78,.15); --accent-subtle: rgba(212,162,78,.08); --accent-text: #E0B86A; /* Text */ --text: #E7E5E4; --text-secondary: #A8A29E; --text-muted: #78716C; --text-on-accent: #1C1917; --text-inverse: #1C1917; /* Borders */ --border: rgba(231,229,228,.1); --border-subtle: rgba(231,229,228,.06); --border-strong: rgba(231,229,228,.18); --border-focus: #D4A24E; /* States */ --success: #7DB486; --success-light: rgba(125,180,134,.12); --warning: #E0A83A; --warning-light: rgba(224,168,58,.12); --error: #D46B6B; --error-light: rgba(212,107,107,.12); --info: #7BAFC4; --info-light: rgba(123,175,196,.12); /* Shadows (darker, subtler) */ --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 2px -1px rgba(0,0,0,.15); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.15); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.3), 0 4px 6px -4px rgba(0,0,0,.2); /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Sidebar (blends with bg) */ --sidebar-bg: #1C1917; --sidebar-hover: #292524; --sidebar-active-border: #D4A24E; --sidebar-text: rgba(231,229,228,.55); --sidebar-text-hover: #E7E5E4; --sidebar-divider: rgba(231,229,228,.06); /* Scrollbar */ --scrollbar-thumb: rgba(231,229,228,.15); --scrollbar-thumb-hover: rgba(231,229,228,.25); /* Channel colors */ --ch-max: #4A9BF7; --ch-telegram: #4DBDF0; --ch-whatsapp: #4ADE80; --ch-email: #E0B86A; --ch-b24: #4DD5F7; /* Backstop */ --backstop-warn: #E8A84A; --backstop-critical: #E05555; --note-bg: rgba(255,248,225,.08); --note-border: rgba(255,224,130,.2); } /* ── Utility classes ──────────────────────────────────────────── */ .font-display { font-family: var(--font-display); } .font-data { font-family: var(--font-data); } .font-ui { font-family: var(--font-ui); }