/* Sales CRM — Design Tokens (single source of truth) * * Theme model: dark is the default. Light ("warm cream + soft peach") is opt-in * via [data-theme="light"] on . Each page sets the attribute synchronously * in from localStorage to prevent FOUC. Theme-agnostic tokens (typography, * spacing, radii, motion, z-indices) live under :root regardless of theme. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); [hidden] { display: none !important; } /* ─── Theme-agnostic tokens ────────────────────────────────────────────── */ :root { /* Typography */ --font-ui: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --lh-tight: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Spacing (4px base) */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 120ms; --t-mid: 220ms; --t-slow: 360ms; /* Z-indices */ --z-header: 10; --z-modal: 100; --z-toast: 200; } /* ─── Dark theme (default) ─────────────────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; --bg-base: #1A1614; /* deepest warm charcoal */ --bg-elev-1: #221E1A; /* columns, header */ --bg-elev-2: #2B2620; /* cards */ --bg-elev-3: #342E27; /* hover, modal interior */ --bg-overlay: rgba(15, 12, 10, 0.72); --fg-primary: #F5F0E8; --fg-secondary: #C8BFB0; --fg-tertiary: #8A8275; --fg-disabled: #5C564D; --accent-amber: #E8A745; --accent-amber-hover: #F0B65A; --accent-coral: #E8744F; --accent-coral-hover: #F08966; --decay-yellow: #E8A745; --decay-red: #C2493B; --decay-green: #6B9F5C; --border: #3A3530; --border-strong: #4F4942; --status-ok: #6B9F5C; --status-warn: #E8A745; --status-fail: #C2493B; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.48); } /* ─── Light theme: warm cream + soft peach ─────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg-base: #F5EFE3; /* warm cream */ --bg-elev-1: #FBF6EA; /* lifted cream — header, columns */ --bg-elev-2: #FFFFFF; /* card paper */ --bg-elev-3: #FFFAF0; /* hover, modal interior */ --bg-overlay: rgba(80, 55, 35, 0.32); --fg-primary: #2A1F18; /* deep warm brown */ --fg-secondary: #5C4B3D; --fg-tertiary: #8A7B6A; --fg-disabled: #B8AB99; --accent-amber: #B8731F; /* darker amber for contrast on cream */ --accent-amber-hover: #9E5F18; --accent-coral: #C4543B; --accent-coral-hover: #A8442D; --decay-yellow: #B8731F; --decay-red: #A8362A; --decay-green: #4F7A43; --border: #E5DAC4; --border-strong: #CFC0A4; --status-ok: #4F7A43; --status-warn: #B8731F; --status-fail: #A8362A; --shadow-sm: 0 1px 2px rgba(80, 55, 35, 0.08); --shadow-md: 0 4px 14px rgba(80, 55, 35, 0.10); --shadow-lg: 0 16px 40px rgba(80, 55, 35, 0.14); } /* ─── Reset + base ─────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-base); color: var(--fg-primary); font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom); transition: background-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out); } h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-tight); margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent-amber); text-decoration: none; } a:hover { color: var(--accent-amber-hover); } /* Utility: monospace for IDs / timestamps / numbers */ .mono { font-family: var(--font-mono); } /* Scrollbars (theme-aware via vars) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Mobile responsive helper */ @container (max-width: 640px) { :root { --fs-base: 1rem; } } /* Modal fade-in / scale-in animation */ @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-scale-in { from { transform: translateY(-8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-backdrop:not([hidden]) { animation: modal-fade-in var(--t-fast) var(--ease-out); } .modal-backdrop:not([hidden]) > .modal { animation: modal-scale-in var(--t-mid) var(--ease-out); } /* Form focus-visible polish */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 1px; } /* Selection color */ ::selection { background: var(--accent-amber); color: var(--bg-base); } /* Touch targets ≥ 36px on mobile */ @media (max-width: 640px) { button, .btn-primary, .btn-ghost, .signout-btn { min-height: 36px; } }