/** * CHM ERP Design System — Tokens only. * User palette: data-chm-palette on (set via Preferences). */ :root, [data-chm-palette="slate"] { /* Default — neutral professional (not coffee/green) */ --chm-brand: #1e293b; --chm-brand-mid: #334155; --chm-gold: #64748b; --chm-gold-soft: rgba(100, 116, 139, 0.12); --chm-accent: #2563eb; --chm-accent-hover: #1d4ed8; --chm-accent-soft: rgba(37, 99, 235, 0.1); --chm-accent-ring: rgba(37, 99, 235, 0.22); --chm-bg: #f1f5f9; --chm-bg-subtle: #e2e8f0; --chm-bg-accent: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); --chm-surface: #ffffff; --chm-surface-raised: #ffffff; --chm-surface-sunken: #f8fafc; --chm-sidebar-bg: #ffffff; --chm-border: #e2e8f0; --chm-border-strong: #cbd5e1; --chm-sidebar-stripe: linear-gradient(90deg, #2563eb 0%, #64748b 100%); } [data-chm-palette="ocean"] { --chm-brand: #0c4a6e; --chm-brand-mid: #075985; --chm-gold: #0284c7; --chm-gold-soft: rgba(2, 132, 199, 0.12); --chm-accent: #0284c7; --chm-accent-hover: #0369a1; --chm-accent-soft: rgba(2, 132, 199, 0.12); --chm-accent-ring: rgba(2, 132, 199, 0.25); --chm-bg: #f0f9ff; --chm-bg-subtle: #e0f2fe; --chm-bg-accent: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); --chm-surface: #ffffff; --chm-surface-sunken: #f8fcff; --chm-border: #bae6fd; --chm-border-strong: #7dd3fc; --chm-sidebar-stripe: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%); } [data-chm-palette="forest"] { /* CHM brand — green & gold (optional, user-selected) */ --chm-brand: #14532d; --chm-brand-mid: #166534; --chm-gold: #b8860b; --chm-gold-soft: rgba(184, 134, 11, 0.14); --chm-accent: #15803d; --chm-accent-hover: #166534; --chm-accent-soft: rgba(21, 128, 61, 0.1); --chm-accent-ring: rgba(21, 128, 61, 0.22); --chm-bg: #f3f0ea; --chm-bg-subtle: #eae6de; --chm-bg-accent: linear-gradient(135deg, #f7f4ef 0%, #ece8e1 100%); --chm-surface: #ffffff; --chm-surface-sunken: #faf8f5; --chm-border: #e8e2d9; --chm-border-strong: #d4cdc3; --chm-sidebar-stripe: linear-gradient(90deg, #15803d 0%, #b8860b 100%); } [data-chm-palette="royal"] { --chm-brand: #1e3a5f; --chm-brand-mid: #172554; --chm-gold: #c9a227; --chm-gold-soft: rgba(201, 162, 39, 0.14); --chm-accent: #1e40af; --chm-accent-hover: #1e3a8a; --chm-accent-soft: rgba(30, 64, 175, 0.1); --chm-accent-ring: rgba(30, 64, 175, 0.22); --chm-bg: #f0f4fa; --chm-bg-subtle: #e2e8f4; --chm-bg-accent: linear-gradient(135deg, #f5f7fc 0%, #e8edf5 100%); --chm-surface: #ffffff; --chm-surface-sunken: #f8fafc; --chm-border: #d8e0ed; --chm-border-strong: #b8c5d9; --chm-sidebar-stripe: linear-gradient(90deg, #1e3a5f 0%, #c9a227 100%); } [data-chm-palette="amethyst"] { --chm-brand: #581c87; --chm-brand-mid: #6b21a8; --chm-gold: #a855f7; --chm-gold-soft: rgba(168, 85, 247, 0.12); --chm-accent: #7c3aed; --chm-accent-hover: #6d28d9; --chm-accent-soft: rgba(124, 58, 237, 0.1); --chm-accent-ring: rgba(124, 58, 237, 0.22); --chm-bg: #f5f3ff; --chm-bg-subtle: #ede9fe; --chm-bg-accent: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%); --chm-surface: #ffffff; --chm-surface-sunken: #faf5ff; --chm-border: #ddd6fe; --chm-border-strong: #c4b5fd; --chm-sidebar-stripe: linear-gradient(90deg, #7c3aed 0%, #c084fc 100%); } [data-chm-palette="emerald"] { --chm-brand: #115e59; --chm-brand-mid: #0f766e; --chm-gold: #14b8a6; --chm-gold-soft: rgba(20, 184, 166, 0.12); --chm-accent: #0d9488; --chm-accent-hover: #0f766e; --chm-accent-soft: rgba(13, 148, 136, 0.1); --chm-accent-ring: rgba(13, 148, 136, 0.22); --chm-bg: #f0fdfa; --chm-bg-subtle: #ccfbf1; --chm-bg-accent: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); --chm-surface: #ffffff; --chm-surface-sunken: #f8fffe; --chm-border: #99f6e4; --chm-border-strong: #5eead4; --chm-sidebar-stripe: linear-gradient(90deg, #0d9488 0%, #2dd4bf 100%); } [data-chm-palette="coral"] { --chm-brand: #9a3412; --chm-brand-mid: #c2410c; --chm-gold: #ea580c; --chm-gold-soft: rgba(234, 88, 12, 0.12); --chm-accent: #ea580c; --chm-accent-hover: #c2410c; --chm-accent-soft: rgba(234, 88, 12, 0.1); --chm-accent-ring: rgba(234, 88, 12, 0.22); --chm-bg: #fff7ed; --chm-bg-subtle: #ffedd5; --chm-bg-accent: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); --chm-surface: #ffffff; --chm-surface-sunken: #fffbf5; --chm-border: #fed7aa; --chm-border-strong: #fdba74; --chm-sidebar-stripe: linear-gradient(90deg, #ea580c 0%, #fb923c 100%); } :root { --chm-font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; --chm-font-mono: ui-monospace, 'Cascadia Code', monospace; --chm-text-xs: 0.6875rem; --chm-text-sm: 0.8125rem; --chm-text-base: 0.875rem; --chm-text-md: 0.9375rem; --chm-text-lg: 1.0625rem; --chm-text-xl: 1.25rem; --chm-text-2xl: 1.5rem; --chm-text-3xl: 1.75rem; --chm-space-1: 0.25rem; --chm-space-2: 0.5rem; --chm-space-3: 0.75rem; --chm-space-4: 1rem; --chm-space-5: 1.25rem; --chm-space-6: 1.5rem; --chm-space-8: 2rem; --chm-space-10: 2.5rem; --chm-radius-xs: 4px; --chm-radius-sm: 8px; --chm-radius-md: 12px; --chm-radius-lg: 16px; --chm-radius-xl: 20px; --chm-radius-full: 9999px; --chm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --chm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --chm-duration-fast: 150ms; --chm-duration-normal: 220ms; --chm-duration-slow: 320ms; --chm-sidebar-w: 268px; --chm-sidebar-collapsed: 80px; --chm-topbar-h: 64px; --chm-content-max: 1480px; --chm-accent-contrast: #ffffff; --chm-success: #15803d; --chm-warning: #b45309; --chm-danger: #dc2626; --chm-info: #2563eb; --chm-text: #1c1917; --chm-text-secondary: #57534e; --chm-text-muted: #a8a29e; --chm-text-inverse: #ffffff; --chm-sidebar-text: #44403c; --chm-sidebar-muted: #78716c; --chm-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04); --chm-shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.06); --chm-shadow-md: 0 8px 28px rgba(28, 25, 23, 0.1); --chm-shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.12); --chm-shadow-sidebar: 2px 0 20px rgba(28, 25, 23, 0.07); --chm-input-py: 0.5625rem; --chm-input-px: 0.875rem; --chm-table-cell-py: 0.875rem; --chm-table-cell-px: 1rem; --chm-page-py: 1.75rem; --chm-page-px: 2rem; --chm-nav-item-py: 0.5625rem; --chm-nav-item-px: 0.875rem; --chm-sidebar-stripe: linear-gradient(90deg, var(--chm-accent) 0%, var(--chm-gold) 100%); } [data-chm-density="compact"] { --chm-input-py: 0.375rem; --chm-input-px: 0.75rem; --chm-table-cell-py: 0.5625rem; --chm-table-cell-px: 0.75rem; --chm-page-py: 1.25rem; --chm-page-px: 1.5rem; --chm-nav-item-py: 0.4375rem; --chm-nav-item-px: 0.75rem; --chm-topbar-h: 56px; } :root { --chm-primary: var(--chm-accent); --chm-primary-hover: var(--chm-accent-hover); --chm-primary-soft: var(--chm-accent-soft); --chm-primary-ring: var(--chm-accent-ring); --chm-font: var(--chm-font-sans); --chm-radius: var(--chm-radius-md); --chm-shadow: var(--chm-shadow-xs); --chm-ease: var(--chm-duration-normal) var(--chm-ease-in-out); }