/** * ERPAL CRM Cockpit — DESIGN TOKENS. * * Single source of truth for every color/background/border/shadow in the * cockpit. Components must reference these custom properties only — no * hardcoded colors outside this file's :root / [data-theme] blocks. * * Theming model (Day / Night / Auto, driven by js/erpal-topbar.js): * - → forced Day * - → forced Night * - no data-theme attribute → Auto (follows prefers-color-scheme) * * Legacy aliases (--erpal-ink/-ink-soft/-line/-brand…) are kept so existing * component CSS keeps working; new code should use the canonical names * (--erpal-text/-muted/-border/-accent…). */ :root { /* ---- layout metrics ---- */ --erpal-sidebar-w: 248px; --erpal-topbar-h: 56px; --erpal-radius: 8px; /* ---- core palette (canonical names) ---- */ --erpal-bg: #f5f6f8; /* app canvas */ --erpal-surface: #ffffff; /* cards, bars, panels */ --erpal-text: #1f2733; /* primary ink */ --erpal-muted: #5f6b7a; /* secondary ink */ --erpal-border: #e6e9ee; /* hairlines */ --erpal-accent: #1a73e8; /* primary action blue */ --erpal-accent-dark: #1559b8; /* hover/active blue */ --erpal-accent-soft: #e8f0fe; /* selected/active tint */ --erpal-on-accent: #ffffff; /* text on accent surfaces */ --erpal-success: #19b886; --erpal-warning: #e8a13a; --erpal-purple: #7a5cd0; --erpal-danger: #d64550; --erpal-danger-dark: #b4333d; /* ---- legacy aliases (existing component CSS) ---- */ --erpal-ink: var(--erpal-text); --erpal-ink-soft: var(--erpal-muted); --erpal-line: var(--erpal-border); --erpal-brand: var(--erpal-accent); --erpal-brand-dark: var(--erpal-accent-dark); --erpal-brand-soft: var(--erpal-accent-soft); /* ---- interactive surfaces ---- */ --erpal-hover: #eef1f6; /* pills, pagers, ghost buttons */ --erpal-hover-soft: #f3f5f9; /* sidebar links */ --erpal-thead-bg: #fafbfe; /* table header strip */ --erpal-row-hover: #f3f7fe; /* table row hover */ --erpal-track: #eef2f9; /* bar chart tracks, pills */ --erpal-divider: #f1f3f6; /* intra-card field dividers */ --erpal-input-bg: #ffffff; /* form controls */ /* ---- sidebar (LIGHT Zoho-style: white, dark text, blue active) ---- */ --erpal-sidebar-bg: #ffffff; --erpal-sidebar-ink: #3c4858; --erpal-sidebar-ink-dim: #97a1b0; --erpal-sidebar-active-bg: var(--erpal-accent-soft); --erpal-sidebar-active-ink: var(--erpal-accent); /* ---- status tags (bg / ink pairs) ---- */ --erpal-tag-bg: #eef1f6; --erpal-tag-ink: #4a5568; --erpal-tag-green-bg: #e3f4ec; --erpal-tag-green-ink: #1b8a5a; --erpal-tag-blue-bg: #e8f0fe; --erpal-tag-blue-ink: #1a73e8; --erpal-tag-amber-bg: #fdf0db; --erpal-tag-amber-ink: #b9770a; --erpal-tag-red-bg: #fde7e7; --erpal-tag-red-ink: #c5343a; --erpal-tag-purple-bg: #f0e9fb;--erpal-tag-purple-ink: #7c3aed; --erpal-marker-dim: #8a94a6; /* timeline "note" marker */ /* ---- elevation ---- */ --erpal-shadow: 0 1px 3px rgba(20,33,61,.06), 0 1px 2px rgba(20,33,61,.04); --erpal-shadow-lg: 0 4px 16px rgba(20,33,61,.10); color-scheme: light; } /* ==================================================================== NIGHT (Zoho NextGen-style navy/near-black surfaces). Keep this token list in sync with the auto block below. ==================================================================== */ [data-theme="dark"] { --erpal-bg: #0e1320; /* near-black navy canvas */ --erpal-surface: #161c2c; /* raised navy cards */ --erpal-text: #e8ecf4; --erpal-muted: #9aa5b8; --erpal-border: #28304a; --erpal-accent: #5b9bff; /* lifted blue for dark contrast */ --erpal-accent-dark: #3d83f2; --erpal-accent-soft: #1d2c4d; --erpal-on-accent: #ffffff; --erpal-success: #2fc795; --erpal-warning: #e9ad52; --erpal-purple: #9a82e8; --erpal-danger: #e2606a; --erpal-danger-dark: #c54850; --erpal-hover: #202942; --erpal-hover-soft: #1b2238; --erpal-thead-bg: #131929; --erpal-row-hover: #1b2440; --erpal-track: #232c47; --erpal-divider: #1f2740; --erpal-input-bg: #0e1320; --erpal-sidebar-bg: #121828; --erpal-sidebar-ink: #c4cddd; --erpal-sidebar-ink-dim: #6e7a92; --erpal-sidebar-active-bg: #1d2c4d; --erpal-sidebar-active-ink: #79aeff; --erpal-tag-bg: #232c47; --erpal-tag-ink: #aeb9cc; --erpal-tag-green-bg: #14352a; --erpal-tag-green-ink: #3ecf8e; --erpal-tag-blue-bg: #18294b; --erpal-tag-blue-ink: #79aeff; --erpal-tag-amber-bg: #392c14; --erpal-tag-amber-ink: #e9b35c; --erpal-tag-red-bg: #3c1c22; --erpal-tag-red-ink: #f0838b; --erpal-tag-purple-bg: #2a2245;--erpal-tag-purple-ink: #b79bf2; --erpal-marker-dim: #6e7a92; --erpal-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --erpal-shadow-lg: 0 4px 18px rgba(0,0,0,.55); color-scheme: dark; } /* AUTO: no data-theme attribute set → follow the OS. Duplicate of the [data-theme="dark"] token set (CSS has no mixins without a build step). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --erpal-bg: #0e1320; --erpal-surface: #161c2c; --erpal-text: #e8ecf4; --erpal-muted: #9aa5b8; --erpal-border: #28304a; --erpal-accent: #5b9bff; --erpal-accent-dark: #3d83f2; --erpal-accent-soft: #1d2c4d; --erpal-on-accent: #ffffff; --erpal-success: #2fc795; --erpal-warning: #e9ad52; --erpal-purple: #9a82e8; --erpal-danger: #e2606a; --erpal-danger-dark: #c54850; --erpal-hover: #202942; --erpal-hover-soft: #1b2238; --erpal-thead-bg: #131929; --erpal-row-hover: #1b2440; --erpal-track: #232c47; --erpal-divider: #1f2740; --erpal-input-bg: #0e1320; --erpal-sidebar-bg: #121828; --erpal-sidebar-ink: #c4cddd; --erpal-sidebar-ink-dim: #6e7a92; --erpal-sidebar-active-bg: #1d2c4d; --erpal-sidebar-active-ink: #79aeff; --erpal-tag-bg: #232c47; --erpal-tag-ink: #aeb9cc; --erpal-tag-green-bg: #14352a; --erpal-tag-green-ink: #3ecf8e; --erpal-tag-blue-bg: #18294b; --erpal-tag-blue-ink: #79aeff; --erpal-tag-amber-bg: #392c14; --erpal-tag-amber-ink: #e9b35c; --erpal-tag-red-bg: #3c1c22; --erpal-tag-red-ink: #f0838b; --erpal-tag-purple-bg: #2a2245;--erpal-tag-purple-ink: #b79bf2; --erpal-marker-dim: #6e7a92; --erpal-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --erpal-shadow-lg: 0 4px 18px rgba(0,0,0,.55); color-scheme: dark; } }