/* ========================================================================== Design Tokens — InterIP All design decisions live here as CSS custom properties. Never hardcode colours, spacing, or typography values outside this file. ========================================================================== */ :root { /* -------------------------------------------------------------------------- COLOR — Primitive palette Breakpoints for reference (mobile-first, used only in media queries): sm: 640px — large phones / small tablets md: 768px — tablets lg: 1024px — laptops / small desktops xl: 1280px — wide desktops -------------------------------------------------------------------------- */ /* Primary: blue — trustworthy, technical */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; /* Neutral: slate — clean, readable UI chrome */ --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; /* Accent: cyan — modern, technical highlight */ --color-accent-100: #cffafe; --color-accent-300: #67e8f9; --color-accent-400: #22d3ee; --color-accent-500: #06b6d4; --color-accent-600: #0891b2; --color-accent-700: #0e7490; /* Orange — service price badge highlight */ --color-orange-500: #f97316; --color-orange-600: #ea580c; /* Semantic status colours */ --color-success-100: #dcfce7; --color-success-500: #22c55e; --color-success-700: #15803d; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-700: #b45309; --color-error-100: #fee2e2; --color-error-500: #ef4444; --color-error-700: #b91c1c; /* -------------------------------------------------------------------------- COLOR — Semantic aliases (light mode) These are the only colour values components should reference directly. -------------------------------------------------------------------------- */ --color-bg-dark: #07101f; --color-bg: var(--color-neutral-50); --color-bg-subtle: var(--color-neutral-100); --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-text: var(--color-neutral-900); --color-text-muted: var(--color-neutral-500); --color-text-subtle: var(--color-neutral-400); --color-text-inverse: #ffffff; --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); --color-link-visited: var(--color-primary-800); --color-focus-ring: var(--color-primary-500); /* -------------------------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------------------------- */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; /* Scale — unitless multipliers of a 16px root */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-widest: 0.08em; /* -------------------------------------------------------------------------- SPACING — 4 px base grid --space-N = N × 4px -------------------------------------------------------------------------- */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* -------------------------------------------------------------------------- SHADOWS -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); /* Coloured glow for interactive hover states */ --shadow-primary-glow: 0 0 0 3px var(--color-primary-200); /* -------------------------------------------------------------------------- Z-INDEX — managed centrally to prevent stacking conflicts -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; /* cards, tooltips, inline popups */ --z-header: 100; /* sticky/fixed site header */ --z-ticker: 50; /* promotional ticker bar — below header so dropdowns clear it */ --z-dropdown: 200; /* nav dropdowns — above header content */ --z-drawer: 300; /* mobile nav drawer — above header */ --z-overlay: 400; /* modal backdrops, search overlay */ --z-modal: 500; /* modal dialogs — above their own overlay */ --z-toast: 600; /* notification toasts — always on top */ /* Height of the sticky ticker bar — used to offset the header's sticky top */ --ticker-height: 38px; /* -------------------------------------------------------------------------- TRANSITIONS -------------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --ease-default: ease; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Composed transition shorthands */ --transition-colors: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); --transition-opacity: opacity var(--duration-normal) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-fast) var(--ease-default); } /* ========================================================================== DARK MODE — override semantic aliases only. Primitive palette stays unchanged; components use aliases, so they adapt. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--color-neutral-900); --color-bg-subtle: var(--color-neutral-800); --color-surface: var(--color-neutral-800); --color-surface-raised: var(--color-neutral-700); --color-border: var(--color-neutral-700); --color-border-strong: var(--color-neutral-600); --color-text: var(--color-neutral-50); --color-text-muted: var(--color-neutral-400); --color-text-subtle: var(--color-neutral-500); --color-text-inverse: var(--color-neutral-900); --color-link: var(--color-primary-400); --color-link-hover: var(--color-primary-300); --color-link-visited: var(--color-primary-200); --color-focus-ring: var(--color-primary-400); --shadow-primary-glow: 0 0 0 3px rgb(59 130 246 / 0.35); } } /* ========================================================================== REDUCED MOTION — collapse animation durations. Components must read these tokens rather than hardcoding durations. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }