/* ═══════════════════════════════════════════════════════════════ CommPass CRM — Design System Theme: Near-black navy + warm gold Fonts: Bricolage Grotesque (display) + Figtree (body) ═══════════════════════════════════════════════════════════════ */ /* Fonts loaded via in for non-blocking render */ /* ── Tokens ── */ /* Brand source: passbeyond.com — navy #0B1D3A, gold #C9A84C */ :root { /* Surfaces — true PassBeyond navy, not near-black */ --bg-base: oklch(10.5% 0.042 252); /* #0a1628 brand dark bg */ --surface-0: oklch(10.5% 0.042 252); --surface-1: oklch(14.5% 0.052 252); /* #0B1D3A brand navy */ --surface-2: oklch(18% 0.048 252); /* elevated card */ --surface-3: oklch(22% 0.042 252); /* input bg */ /* Borders */ --border: oklch(27% 0.044 252); --border-subtle: oklch(21% 0.040 252); /* Text */ --text-primary: oklch(93.5% 0.010 250); /* #e8ecf4 brand light text */ --text-secondary: oklch(70% 0.022 250); --text-muted: oklch(54% 0.030 252); /* #8B95A5 brand slate */ --text-disabled: oklch(38% 0.020 252); /* Gold accent — exact brand #C9A84C */ --gold: oklch(70.5% 0.103 72); --gold-hover: oklch(75% 0.100 72); /* #D4B96A brand gold-light */ --gold-subtle: oklch(70.5% 0.038 72); --gold-bg: oklch(17% 0.030 72); /* gold-tinted surface */ /* Status — aligned to brand #34D399 / #EF4444 / #3B82F6 */ --success: oklch(77% 0.15 162); /* #34D399 */ --success-bg: oklch(14% 0.030 162); --warning: oklch(75% 0.13 70); --warning-bg: oklch(14% 0.028 70); --danger: oklch(59% 0.20 25); /* #EF4444 */ --danger-bg: oklch(14% 0.032 25); --info: oklch(58% 0.20 262); /* #3B82F6 */ --info-bg: oklch(14% 0.028 262); /* Semantic aliases (for legacy compat) */ --bg: var(--bg-base); --card: var(--surface-1); --card2: var(--surface-2); --accent: var(--gold); --accent-light: var(--gold-hover); --accent-hover: var(--gold-hover); --green: var(--success); --red: var(--danger); --text: var(--text-primary); --muted: var(--text-muted); /* Radius */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Typography */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-mono: 'Geist Mono', 'Cascadia Code', ui-monospace, monospace; /* Shadows */ --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.25); --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.40), 0 2px 4px oklch(0% 0 0 / 0.20); --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.50), 0 4px 8px oklch(0% 0 0 / 0.25); --shadow-gold: 0 0 0 1px var(--gold), 0 4px 20px oklch(70.5% 0.103 72 / 0.15); /* Transitions */ --transition-fast: 80ms cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 150ms cubic-bezier(0.22, 1, 0.36, 1); --transition-slow: 250ms cubic-bezier(0.22, 1, 0.36, 1); /* Legacy */ --border-color: var(--border); --nav-height: 56px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); min-height: 100vh; line-height: 1.55; letter-spacing: 0.01em; } /* ── Base typography ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); color: var(--gold); } a { color: var(--gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--gold-hover); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Selection ── */ ::selection { background: color-mix(in oklch, var(--gold) 25%, transparent); color: var(--text-primary); }