/* ========================================================================== CallerConnect House Style — Design Tokens Drop this file into any product to inherit the brand. Override semantic vars to theme per app; keep --cc-* brand values stable. ========================================================================== */ :root { /* --- Brand palette (from official palette, do not change) --- */ --cc-ink: #001021; --cc-teal: #034748; --cc-sage: #356C5F; --cc-ocean: #0C6481; --cc-blue: #1481BA; --cc-sky: #11B5E4; --cc-cyan: #0CAADC; --cc-orange: #FF5F00; --cc-burnt: #E75419; /* --- Semantic (themeable) --- */ --bg: var(--cc-ink); --bg-elev: #041827; --surface: #0a2234; --surface-2: #0f2c42; --text: #E6EEF5; --text-muted: #8FA6B8; --text-dim: #5e7488; --brand: var(--cc-sky); --brand-strong:var(--cc-blue); --accent: var(--cc-orange); --accent-strong: var(--cc-burnt); --success: var(--cc-sage); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); /* --- Typography --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.75rem; --fs-5xl: 3.75rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Spacing scale (4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Radius (sharper "CallerConnect" edges) --- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-pill: 999px; /* --- Shadow --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 40px rgba(17, 181, 228, 0.25); --shadow-accent-glow: 0 0 32px rgba(255, 95, 0, 0.35); /* --- Motion --- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; /* --- Layout --- */ --container: 1200px; --nav-height: 72px; /* --- Gradients --- */ --grad-hero: radial-gradient(circle at 20% 20%, rgba(17,181,228,0.35), transparent 50%), radial-gradient(circle at 80% 60%, rgba(255,95,0,0.25), transparent 55%), radial-gradient(circle at 50% 100%, rgba(12,100,129,0.4), transparent 60%); --grad-brand: linear-gradient(135deg, var(--cc-blue) 0%, var(--cc-sky) 100%); --grad-accent: linear-gradient(135deg, var(--cc-orange) 0%, var(--cc-burnt) 100%); --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); } /* ========================================================================== Light theme — applied via [data-theme="light"] on . "Auto" theme is signalled via [data-theme="auto"] which then defers to prefers-color-scheme via the @media query below. ========================================================================== */ [data-theme="light"] { --bg: #ffffff; --bg-elev: #f7f9fc; --surface: #f7f9fc; --surface-2: #eef2f7; --text: var(--cc-ink); --text-muted: rgba(0, 16, 33, 0.66); --text-dim: rgba(0, 16, 33, 0.42); --border: rgba(0, 16, 33, 0.10); --border-strong: rgba(0, 16, 33, 0.22); --shadow-sm: 0 1px 2px rgba(0, 16, 33, 0.06); --shadow-md: 0 8px 24px rgba(0, 16, 33, 0.08); --shadow-lg: 0 24px 60px rgba(0, 16, 33, 0.12); --shadow-glow: 0 0 40px rgba(17, 181, 228, 0.18); --shadow-accent-glow: 0 0 32px rgba(255, 95, 0, 0.20); --grad-hero: radial-gradient(circle at 20% 20%, rgba(17, 181, 228, 0.10), transparent 55%), radial-gradient(circle at 80% 60%, rgba(255, 95, 0, 0.07), transparent 60%); --grad-surface: linear-gradient(180deg, rgba(0, 16, 33, 0.02), rgba(0, 16, 33, 0)); } @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: #ffffff; --bg-elev: #f7f9fc; --surface: #f7f9fc; --surface-2: #eef2f7; --text: var(--cc-ink); --text-muted: rgba(0, 16, 33, 0.66); --text-dim: rgba(0, 16, 33, 0.42); --border: rgba(0, 16, 33, 0.10); --border-strong: rgba(0, 16, 33, 0.22); --shadow-sm: 0 1px 2px rgba(0, 16, 33, 0.06); --shadow-md: 0 8px 24px rgba(0, 16, 33, 0.08); --shadow-lg: 0 24px 60px rgba(0, 16, 33, 0.12); --shadow-glow: 0 0 40px rgba(17, 181, 228, 0.18); --shadow-accent-glow: 0 0 32px rgba(255, 95, 0, 0.20); --grad-hero: radial-gradient(circle at 20% 20%, rgba(17, 181, 228, 0.10), transparent 55%), radial-gradient(circle at 80% 60%, rgba(255, 95, 0, 0.07), transparent 60%); --grad-surface: linear-gradient(180deg, rgba(0, 16, 33, 0.02), rgba(0, 16, 33, 0)); } }