@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { color-scheme: light dark; --primary-colour: hsl(334, 100%, 32%); --primary-dark: color-mix(in hsl, var(--primary-colour), black 20%); --primary-light: color-mix(in hsl, var(--primary-colour), white 30%); --primary-muted: color-mix(in hsl, var(--primary-colour), gray 40%); --primary-shadow: color-mix(in hsl, var(--primary-colour), black 80%); --white: hsl(0, 0%, 100%); --black: hsl(0, 0%, 0%); /* The warm off-white used for text sitting directly on a solid brand-magenta-family background (the hero wordmark, the homepage hook section's body column) - deliberately not pure --white. Named generically since a third such use should confirm the shade still fits, not just assume. */ --text-on-brand: #F4F0EC; --background: var(--white); --surface: var(--white); --text: var(--black); --text-muted: color-mix(in hsl, var(--text), white 10%); --border: var(--primary-light); --focus-ring: var(--primary-colour); --hover-opacity: 0.1; --active-opacity: 0.2; --active-hover-opacity: 0.3; --hairline-width: 72px; --hairline-thickness: 2px; --hairline-opacity: 0.3; /* Matches TopMenu.razor.css's rendered nav height (40px logo + padding); the hero's viewport-fill calc needs this as a shared value since it isn't a descendant of