/* ========================================================================= themes/goodwear.css — Goodwear Fashions Pvt. Ltd. "Deep Teal & Midnight": a teal brand on a cool slate ground, with a midnight-navy sidebar. Calm enough for an all-day work tool; the teal is kept for actions and the current place, so it always means "this one". Loads AFTER crm-core.css. This file sets COLOURS ONLY — the brand contract plus core's palette tokens, for light and dark. Geometry, spacing and components belong in core, or they drift between clients. Selector notes -------------- Tabler puts data-bs-theme="dark" on for dark mode, and always on the sidebar. `:root` and `[data-bs-theme="dark"]` have equal specificity, so because this file loads after core, a plain `:root` here would beat core's dark block. Dark values therefore use `:root[data-bs-theme="dark"]` (beats `:root`) plus `[data-bs-theme="dark"]` (reaches the sidebar). Sidebar tokens live only on `:root…` blocks, so the always-dark sidebar does not re-declare them on itself. Contrast (WCAG 2.x, against the surface each sits on) primary #0F766E on white 5.5:1 white text on primary 5.5:1 text #0E1A2B on white 17.5:1 secondary #475569 7.6:1 muted #5F6F86 on white 5.1:1 error #C81E3A 5.7:1 dark: text #E5ECF4 on #101A26 14.7:1, link #3FD0BF 9.2:1, white on primary #0F857B 4.5:1 ========================================================================= */ /* ------------------------------------------------------------------------- 1. LIGHT ------------------------------------------------------------------------- */ :root { /* ---------- brand contract ---------- */ --brand-primary: #0F766E; --brand-primary-hover: #0B5C56; --brand-primary-subtle: #E6F4F2; --brand-primary-rgb: 15, 118, 110; /* must match --brand-primary */ --brand-dark: #0B1A2A; --brand-font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* ---------- surfaces: cool slate, never pure grey ---------- */ --crm-bg-app: #F3F6F9; --crm-surface: #FFFFFF; --crm-surface-sunken: #F6F8FB; --crm-surface-hover: #F8FAFC; --crm-border: #E1E7EF; --crm-border-strong: #C8D1DD; --crm-divider: #EDF1F6; /* ---------- text ---------- */ --crm-text: #0E1A2B; --crm-text-secondary: #475569; --crm-text-muted: #5F6F86; --crm-link: #0F766E; --crm-link-hover: #0B5C56; /* ---------- semantic ---------- */ --crm-success: #15803D; --crm-success-subtle: #EAF7EF; --crm-warning: #B45309; --crm-warning-subtle: #FEF5E7; --crm-error: #C81E3A; --crm-error-subtle: #FDEEF0; --crm-info: #1D5FD1; --crm-info-subtle: #EBF2FD; /* ---------- icon-tile tones ---------- */ --crm-tone-blue: #2563EB; --crm-tone-violet: #6D4AD6; --crm-tone-cyan: #0E7490; /* ---------- pipeline status ---------- Same rules as core: desaturated, Lost is grey, Overdue is the only red. */ --crm-status-new: #43597A; --crm-status-contacted: #1D5FD1; --crm-status-sample: #6D4AD6; --crm-status-qualified: #0E7490; --crm-status-quotation: #B45309; --crm-status-negotiation: #92400E; --crm-status-won: #15803D; --crm-status-lost: #5F6B7C; --crm-status-overdue: #C81E3A; --crm-status-new-bg: #E9EFF7; --crm-status-contacted-bg: #EBF2FD; --crm-status-sample-bg: #F1EDFC; --crm-status-qualified-bg: #E6F4F8; --crm-status-quotation-bg: #FEF5E7; --crm-status-negotiation-bg: #FBEFE0; --crm-status-won-bg: #EAF7EF; --crm-status-lost-bg: #EEF1F5; --crm-status-overdue-bg: #FDEEF0; /* ---------- sidebar: midnight navy with a teal accent ---------- */ --crm-sidebar-bg: linear-gradient(180deg, #0D1F33 0%, #0A1726 100%); --crm-sidebar-border: #0A1624; --crm-sidebar-text: #A7B4C6; --crm-sidebar-text-hover: #FFFFFF; --crm-sidebar-hover-bg: rgba(255,255,255,.05); --crm-sidebar-active-bg: rgba(45,212,191,.12); --crm-sidebar-active-text: #FFFFFF; --crm-sidebar-indicator: #2DD4BF; --crm-sidebar-label: #7A8CA8; --crm-sidebar-mark-bg: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%); --crm-sidebar-mark-text: #FFFFFF; --crm-sidebar-accent: #5EEAD4; } /* ------------------------------------------------------------------------- 2. DARK ------------------------------------------------------------------------- */ :root[data-bs-theme="dark"], [data-bs-theme="dark"] { --brand-primary: #0F857B; --brand-primary-hover: #12A094; --brand-primary-subtle: #0F2A2C; --brand-primary-rgb: 15, 133, 123; --crm-bg-app: #0A1119; --crm-surface: #101A26; --crm-surface-sunken: #142131; --crm-surface-hover: #13202F; --crm-border: #1F2E42; --crm-border-strong: #2E4059; --crm-divider: #1A2738; --crm-text: #E5ECF4; --crm-text-secondary: #A3B1C4; --crm-text-muted: #7A8BA3; --crm-link: #3FD0BF; --crm-link-hover: #7BE3D6; --crm-success: #3DC07F; --crm-success-subtle: #0F2D21; --crm-warning: #F0A845; --crm-warning-subtle: #33240C; --crm-error: #F26178; --crm-error-subtle: #361720; --crm-info: #6EA8F5; --crm-info-subtle: #12233D; --crm-tone-blue: #6EA8F5; --crm-tone-violet: #A78BFA; --crm-tone-cyan: #4FC3DC; --crm-status-new: #9DABBD; --crm-status-contacted: #6EA8F5; --crm-status-sample: #A78BFA; --crm-status-qualified: #4FC3DC; --crm-status-quotation: #F0A845; --crm-status-negotiation: #E39B4B; --crm-status-won: #3DC07F; --crm-status-lost: #8695AA; --crm-status-overdue: #F26178; --crm-status-new-bg: #1A2636; --crm-status-contacted-bg: #12233D; --crm-status-sample-bg: #221C3B; --crm-status-qualified-bg: #0F2A33; --crm-status-quotation-bg: #33240C; --crm-status-negotiation-bg: #34230F; --crm-status-won-bg: #0F2D21; --crm-status-lost-bg: #1A2636; --crm-status-overdue-bg: #361720; } /* Sidebar in dark mode: a shade deeper than the page so it still reads as its own column. only — see the selector notes above. */ :root[data-bs-theme="dark"] { --crm-sidebar-bg: #08101A; --crm-sidebar-border: #16222F; } [data-bs-theme="dark"] .skeleton { background: linear-gradient(90deg, #142131 25%, #1B2A3D 50%, #142131 75%); background-size: 200% 100%; }