/* ============================================================ DESIGN TOKENS — Reid IT Consultancy --c-primary / --c-secondary / --c-accent are injected in the from Admin > Theme. Everything else derives from here. ============================================================ */ :root { /* Brand fallbacks (overridden inline from /data/theme.json) */ --c-primary: #2F5BEA; /* Reid blue */ --c-secondary: #0B1422; /* ink navy */ --c-accent: #2BD9A9; /* signal green*/ /* Fixed palette */ --c-star: #F5B83D; /* review stars */ --c-danger: #E5484D; --c-success: #1DA97C; /* Type */ --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Fluid type scale */ --fs-900: clamp(2.4rem, 1.4rem + 4.5vw, 4.6rem); /* hero h1 */ --fs-800: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); /* h2 */ --fs-700: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); /* h3 large */ --fs-600: 1.25rem; --fs-500: 1.0625rem; --fs-400: 1rem; --fs-300: 0.875rem; --fs-200: 0.78rem; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; /* Radii + motion */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --speed: 0.35s; /* Light theme surfaces */ --bg: #F2F5FA; --bg-raised: #FFFFFF; --bg-sunken: #E8EDF5; --text: #101B2D; --text-muted: #51607A; --line: rgba(16, 27, 45, 0.1); --shadow-sm: 0 2px 10px rgba(13, 25, 48, 0.07); --shadow-md: 0 10px 36px rgba(13, 25, 48, 0.12); --shadow-lg: 0 24px 70px rgba(13, 25, 48, 0.18); --glass-bg: rgba(255, 255, 255, 0.62); --glass-line: rgba(255, 255, 255, 0.75); --nav-bg: rgba(244, 247, 251, 0.78); --hero-veil: linear-gradient(105deg, rgba(242, 245, 250, 0.97) 38%, rgba(242, 245, 250, 0.55) 68%, rgba(242, 245, 250, 0.18)); } [data-theme="dark"] { --bg: #0A111E; --bg-raised: #121C2E; --bg-sunken: #070D17; --text: #E9EFF9; --text-muted: #94A2BC; --line: rgba(233, 239, 249, 0.1); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 36px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55); --glass-bg: rgba(18, 28, 46, 0.55); --glass-line: rgba(233, 239, 249, 0.12); --nav-bg: rgba(10, 17, 30, 0.72); --hero-veil: linear-gradient(105deg, rgba(10, 17, 30, 0.96) 38%, rgba(10, 17, 30, 0.6) 68%, rgba(10, 17, 30, 0.25)); }