/* Electronic Labs brand palette in the shadcn/ui token slots. Tailwind (Play CDN) maps them to colour names in the inline tailwind.config of Pages/Shared/_Layout.cshtml, e.g. bg-primary -> hsl(var(--primary)). Source colours: green #157F1F, glaucous #5C80BC, shadow grey #352D39, light green #9EE493, dusty taupe #A5907E. Neutrals are tints of taupe and light green, so nothing on the page is a pure grey. Glaucous (3.82:1 on the ground) and taupe (3.05:1) both miss AA for text and are used only for rings, borders and fills. */ :root { --background: 30 20% 98%; /* #FBFAF9 warm off-white, taupe-tinted */ --foreground: 280 11.8% 20%; /* #352D39 shadow grey */ --card: 0 0% 100%; --card-foreground: 280 11.8% 20%; --popover: 0 0% 100%; --popover-foreground: 280 11.8% 20%; --primary: 126 71.6% 29%; /* #157F1F green - buttons, step markers */ --primary-foreground: 0 0% 100%; /* 5.14:1 on the green */ --secondary: 26 20% 93.1%; /* #F1EDEA dusty taupe tint */ --secondary-foreground: 26 13.1% 23.9%; --muted: 110 60% 94.1%; /* #EAF9E7 light green wash - hero, CTA, footer */ --muted-foreground: 285 3.7% 42.4%; /* #6E6870 4.95:1 on the wash, 5.20:1 on the ground */ --accent: 219 43.8% 93.7%; /* #E8EDF6 glaucous tint - hover surfaces */ --accent-foreground: 218 34.5% 34.1%; --destructive: 0 72% 42%; --destructive-foreground: 0 0% 100%; --border: 28 17.3% 85.3%; /* #E0D9D3 dusty taupe */ --input: 27 18% 80.4%; /* #D6CCC4 form-field outlines */ --ring: 218 41.7% 54.9%; /* #5C80BC glaucous - focus rings */ --radius: 0.5rem; color-scheme: light; } /* Applied to by the inline script in _Layout: the visitor's OS preference, or their own stored choice if they have used the toggle. Light green takes over as --primary here, since the deep green would sit too close to the ground. */ .dark { --background: 280 11% 11%; --foreground: 30 15% 95%; --card: 280 11% 13%; --card-foreground: 30 15% 95%; --popover: 280 11% 13%; --popover-foreground: 30 15% 95%; --primary: 112 60% 73.5%; /* #9EE493 light green carries the brand on dark */ --primary-foreground: 280 11.8% 14%; --secondary: 28 10% 22%; --secondary-foreground: 30 15% 92%; --muted: 280 9% 18%; --muted-foreground: 28 12% 68%; --accent: 218 25% 26%; --accent-foreground: 218 55% 84%; --destructive: 0 70% 68%; /* #E77474 the light red is the readable one on a dark card */ --destructive-foreground: 280 11.8% 14%; --border: 280 9% 24%; --input: 280 9% 26%; --ring: 218 41.7% 60%; --radius: 0.5rem; color-scheme: dark; } /* Base layer (what shadcn puts in @layer base). Works even before the Tailwind CDN script runs. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Theme-dependent art. Plain CSS, not Tailwind's dark: variants, because site.css is parsed before the Tailwind CDN script runs - a dark: class would flash the wrong artwork until then. */ .on-dark { display: none; } .dark .on-light { display: none; } .dark .on-dark { display: block; } /* Checkboxes and radios are drawn by the browser, so they miss the token system unless told. */ input[type="checkbox"], input[type="radio"] { accent-color: hsl(var(--primary)); } /* Tabular figures for prices and quantities: add class="tabular" */ .tabular { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }