/* ============================================================= copilotBC — core tokens ------------------------------------------------------------- The single source of truth for visual decisions that apply to BOTH the marketing site and the app. Marketing-only and app-only tokens live in their respective layer files. Convention: never reference these values literally inside components. Reference the variable. ============================================================= */ /* Fonts. Self-host these in production; the CDN link is for preview pages and prototyping only. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ─── Colour: blue ramp ───────────────────────────────────── */ --color-blue-50: #EFF6FF; --color-blue-100: #DBEAFE; --color-blue-200: #BFDBFE; --color-blue-300: #93C5FD; --color-blue-400: #60A5FA; --color-blue-500: #3B82F6; --color-blue-600: #1A56DB; /* primary — the copilotBC blue */ --color-blue-700: #1245B0; /* primary hover */ --color-blue-800: #0F3787; --color-blue-900: #0A2A66; /* ─── Colour: neutral ramp ────────────────────────────────── */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F9FAFB; --color-neutral-100: #F3F4F6; --color-neutral-200: #E5E7EB; --color-neutral-300: #D1D5DB; --color-neutral-400: #9CA3AF; --color-neutral-500: #6B7280; --color-neutral-600: #4B5563; --color-neutral-700: #374151; --color-neutral-800: #1F2937; --color-neutral-900: #111827; /* ─── Colour: semantic trios ──────────────────────────────── */ --color-success-bg: #DCFCE7; --color-success-text: #14532D; --color-success-bold: #16A34A; --color-warning-bg: #FEF3C7; --color-warning-text: #78350F; --color-warning-bold: #D97706; --color-danger-bg: #FEE2E2; --color-danger-text: #7F1D1D; --color-danger-bold: #DC2626; --color-info-bg: #DBEAFE; --color-info-text: #1E3A8A; --color-info-bold: #2563EB; /* ─── Colour: semantic aliases ────────────────────────────── */ --color-primary: var(--color-blue-600); --color-primary-hover: var(--color-blue-700); --color-primary-tint: var(--color-blue-50); --color-primary-on: var(--color-neutral-0); --color-bg-app: var(--color-neutral-50); --color-bg-surface: var(--color-neutral-0); --color-bg-subtle: var(--color-neutral-100); --color-bg-inverse: var(--color-neutral-900); --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-border-focus: var(--color-blue-500); --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-600); --color-text-tertiary: var(--color-neutral-400); --color-text-inverse: var(--color-neutral-0); --color-text-link: var(--color-blue-700); /* ─── Typography: families ────────────────────────────────── */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Fraunces', 'Inter', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* ─── Typography: sizes (modular ~1.2) ────────────────────── */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 76px; --text-7xl: 96px; /* ─── Typography: weights ─────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ─── Typography: leading ─────────────────────────────────── */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ─── Typography: tracking ────────────────────────────────── */ --tracking-tighter: -0.03em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.08em; /* ─── Spacing (4px base) ──────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px; /* ─── Radii ───────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-pill: 9999px; /* ─── Elevation ───────────────────────────────────────────── */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-3: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05); --shadow-4: 0 24px 56px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px rgba(26, 86, 219, 0.32); --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.30); /* ─── Motion ──────────────────────────────────────────────── */ --duration-micro: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* Cinematic durations — marketing only. */ --duration-cinema-1: 600ms; --duration-cinema-2: 900ms; --duration-cinema-3: 1400ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-confident: cubic-bezier(0.16, 1, 0.3, 1); /* slow-in fast-out */ --ease-exit: cubic-bezier(0.7, 0, 0.84, 0); /* fast-in slow-out */ --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1); /* gentle overshoot */ /* ─── Z-index scale ───────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; /* ─── Layout ──────────────────────────────────────────────── */ --container-narrow: 720px; --container-base: 960px; --container-wide: 1200px; --container-prose: 640px; /* Breakpoints exposed as variables for JS — CSS uses them in media queries directly. */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* Reduced motion: shrink all motion-tied durations to near-zero so token-driven transitions just snap. Components that must run animation regardless should use `motion-safe` media query. */ @media (prefers-reduced-motion: reduce) { :root { --duration-micro: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-cinema-1: 0ms; --duration-cinema-2: 0ms; --duration-cinema-3: 0ms; } }