/* =========================================================================== LeadPulse by Twinfusion — design tokens Derived from the Twinfusion logo (navy wordmark, teal→cyan→lime wing). =========================================================================== */ :root { /* Brand */ --tf-navy: #0d2b45; --tf-navy-700: #163a5c; --tf-navy-900: #081d31; --tf-teal: #0097a7; --tf-teal-700: #00838f; --tf-teal-100: #e0f4f6; --tf-cyan: #00bcd4; --tf-cyan-100: #e0f7fa; --tf-lime: #a5d63f; --tf-green: #2e7d32; --tf-green-100: #e8f5e9; --tf-amber: #f9a825; --tf-amber-100: #fff8e1; --tf-red: #d32f2f; --tf-red-100: #ffebee; --tf-purple: #6a1b9a; --tf-purple-100: #f3e5f5; --tf-indigo: #3949ab; --tf-slate: #78909c; /* Surfaces */ --bg: #f4f7fa; --surface: #ffffff; --surface-2: #eef3f7; --surface-3: #e3ebf2; --overlay: rgba(13, 43, 69, .52); /* Text */ --text: #263238; --text-muted: #607d8b; --text-faint: #90a4ae; --text-invert: #ffffff; --border: #dce3ea; --border-strong: #c3ced9; /* Shape */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-pill: 999px; --shadow: 0 2px 10px rgba(13, 43, 69, .08); --shadow-sm: 0 1px 3px rgba(13, 43, 69, .08); --shadow-lg: 0 10px 30px rgba(13, 43, 69, .14); --ring: 0 0 0 3px rgba(0, 188, 212, .35); /* Type */ --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-stat: 28px; /* Layout */ --sidebar-w: 248px; --sidebar-w-collapsed: 68px; --topbar-h: 60px; --bottombar-h: 60px; --content-max: 1400px; --gutter: 24px; --gutter-mobile: 16px; /* Motion */ --t-fast: 120ms cubic-bezier(.4, 0, .2, 1); --t-base: 200ms cubic-bezier(.4, 0, .2, 1); --t-slow: 320ms cubic-bezier(.4, 0, .2, 1); /* Gradients */ --grad-brand: linear-gradient(135deg, #00838f 0%, #0097a7 45%, #00bcd4 100%); --grad-wing: linear-gradient(135deg, #00bcd4 0%, #a5d63f 100%); --grad-sidebar: linear-gradient(180deg, #0d2b45 0%, #163a5c 100%); --grad-admin: linear-gradient(180deg, #2b0d45 0%, #4a1a6e 100%); /* Semantic aliases */ --primary: var(--tf-teal); --primary-hover: var(--tf-teal-700); --accent: var(--tf-cyan); --success: var(--tf-green); --warning: var(--tf-amber); --danger: var(--tf-red); --info: var(--tf-cyan); /* Stage colours (docs/DESIGN_SYSTEM.md) */ --stage-new: #0097a7; --stage-contacted: #00bcd4; --stage-qualified: #2e7d32; --stage-proposal: #3949ab; --stage-negotiation: #f9a825; --stage-won: #a5d63f; --stage-lost: #d32f2f; --stage-nurture: #8e24aa; --stage-unqualified: #78909c; /* Chart palette */ --chart-1: #0097a7; --chart-2: #00bcd4; --chart-3: #a5d63f; --chart-4: #0d2b45; --chart-5: #f9a825; --chart-6: #d32f2f; --chart-7: #6a1b9a; --chart-8: #3949ab; /* GPS accuracy */ --gps-good: #2e7d32; --gps-ok: #f9a825; --gps-poor: #d32f2f; --z-sticky: 50; --z-drawer: 200; --z-modal: 300; --z-toast: 400; } /* -------------------------------------------------------------------------- Dark theme — applied by assets/js/app.js (data-theme on ) -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0f1c28; --surface: #16283a; --surface-2: #1d3349; --surface-3: #244058; --overlay: rgba(0, 0, 0, .62); --text: #e6eef5; --text-muted: #9fb3c4; --text-faint: #7a93a8; --border: #274a66; --border-strong: #35607f; --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45); --tf-teal-100: #123a41; --tf-cyan-100: #0f333c; --tf-green-100: #13301a; --tf-amber-100: #3a2f10; --tf-red-100: #3a1618; --tf-purple-100: #2c163a; --grad-sidebar: linear-gradient(180deg, #0b1724 0%, #12283b 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1c28; --surface: #16283a; --surface-2: #1d3349; --surface-3: #244058; --overlay: rgba(0, 0, 0, .62); --text: #e6eef5; --text-muted: #9fb3c4; --text-faint: #7a93a8; --border: #274a66; --border-strong: #35607f; --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45); --tf-teal-100: #123a41; --tf-cyan-100: #0f333c; --tf-green-100: #13301a; --tf-amber-100: #3a2f10; --tf-red-100: #3a1618; --tf-purple-100: #2c163a; --grad-sidebar: linear-gradient(180deg, #0b1724 0%, #12283b 100%); } } /* Super-admin accent overrides (layouts/admin sets data-area="admin") */ :root[data-area="admin"] { --primary: var(--tf-purple); --primary-hover: #56157d; --accent: #9c4dcc; --grad-brand: linear-gradient(135deg, #4a1a6e 0%, #6a1b9a 45%, #9c4dcc 100%); }