@layer reset, base, components, modules, utilities, native, platform; :root { /* Spacing */ --inline-space: 1ch; --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2); --block-space: 1rem; --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2); /* Font families */ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, serif; --font-mono: ui-monospace, monospace; /* Text sizes */ --text-xx-small: 0.55rem; --text-x-small: 0.75rem; --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; @media (max-width: 639px) { --text-xx-small: 0.65rem; --text-x-small: 0.85rem; --text-small: 0.95rem; --text-normal: 1.1rem; --text-medium: 1.2rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; } /* Borders */ --border: 1px solid var(--color-ink-lighter); /* Shadows */ --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%), 0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%); --shadow-lg: 0 0 0 1px oklch(var(--lch-black) / 8%), 0 0.4em 0.6em oklch(var(--lch-black) / 10%), 0 0.8em 1.2em oklch(var(--lch-black) / 10%), 0 1.2em 1.8em oklch(var(--lch-black) / 8%); /* Components */ --btn-size: 2.65em; --footer-height: 3.0rem; /* Focus rings for keyboard navigation */ --focus-ring-color: var(--color-link); --focus-ring-offset: 1px; --focus-ring-size: 2px; --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color); /* Easing functions */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1); --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1); /* Layout */ --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); --main-width: 1400px; /* Z-index */ --z-popup: 10; --z-nav: 20; --z-flash: 30; --z-tooltip: 40; --z-bar: 50; --z-tray: 51; --z-welcome: 52; --z-nav-open: 100; /* ========================================================================= OKLCH Colors: Fixed ========================================================================= */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; /* ========================================================================= OKLCH Colors: Ink scale (from Fizzy - neutral grays) ========================================================================= */ --lch-canvas: var(--lch-hogpoint-background); --lch-ink-inverted: var(--lch-white); --lch-ink-darkest: 26% 0.05 264; --lch-ink-darker: 40% 0.026 262; --lch-ink-dark: 56% 0.014 260; --lch-ink-medium: 66% 0.008 258; --lch-ink-light: 84% 0.005 256; --lch-ink-lighter: 92% 0.003 254; --lch-ink-lightest: 96% 0.002 252; /* ========================================================================= OKLCH Colors: Fizzy color scales (for UI abstractions) ========================================================================= */ --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-lighter: 92% 0.03 44; --lch-yellow-lighter: 92% 0.076 90; --lch-green-dark: 55% 0.162 147; --lch-blue-dark: 57.02% 0.1895 260.46; --lch-blue-lighter: 92% 0.026 254; /* ========================================================================= OKLCH Colors: HogPoint brand palette ========================================================================= */ --lch-hogpoint-background: 97.1% 0.02 83.1; --lch-hogpoint-green: 79.4% 0.082 140.4; --lch-hogpoint-orange: 73.5% 0.156 46.1; --lch-hogpoint-yellow: 90.2% 0.118 88.6; --lch-hogpoint-purple: 82.6% 0.037 311.7; --lch-hogpoint-slaughter-red: 63.6% 0.09 19.5; --lch-hogpoint-slaughter-red2: 88.5% 0.041 17.7; --lch-hogpoint-blue1: 85.3% 0.038 224.7; --lch-hogpoint-blue2: 76.0% 0.054 227.1; --lch-hogpoint-blue3: 58.6% 0.062 233.1; --lch-hogpoint-blue4: 47.2% 0.059 234.5; /* Lightest variants for form backgrounds */ --lch-hogpoint-orange-lightest: 95% 0.03 46.1; --lch-hogpoint-purple-lightest: 95% 0.015 311.7; --lch-hogpoint-blue2-lightest: 95% 0.02 227.1; --lch-hogpoint-slaughter-lightest: 95% 0.02 19.5; /* ========================================================================= Colors: Named (fixed) ========================================================================= */ --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); /* ========================================================================= Colors: Ink scale (text, borders, backgrounds) ========================================================================= */ --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darkest: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); /* ========================================================================= Colors: HogPoint brand (named) ========================================================================= */ --color-hogpoint-green: oklch(var(--lch-hogpoint-green)); --color-hogpoint-orange: oklch(var(--lch-hogpoint-orange)); --color-hogpoint-yellow: oklch(var(--lch-hogpoint-yellow)); --color-hogpoint-purple: oklch(var(--lch-hogpoint-purple)); --color-hogpoint-slaughter-red: oklch(var(--lch-hogpoint-slaughter-red)); --color-hogpoint-slaughter-red2: oklch(var(--lch-hogpoint-slaughter-red2)); --color-hogpoint-blue1: oklch(var(--lch-hogpoint-blue1)); --color-hogpoint-blue2: oklch(var(--lch-hogpoint-blue2)); --color-hogpoint-blue3: oklch(var(--lch-hogpoint-blue3)); --color-hogpoint-blue4: oklch(var(--lch-hogpoint-blue4)); /* ========================================================================= Colors: Blue scale (mapped from HogPoint blues) ========================================================================= */ --color-blue-lightest: var(--color-hogpoint-blue1); --color-blue-lighter: var(--color-hogpoint-blue1); --color-blue-light: var(--color-hogpoint-blue2); --color-blue: var(--color-hogpoint-blue3); --color-blue-dark: var(--color-hogpoint-blue3); --color-blue-darker: var(--color-hogpoint-blue4); --color-blue-darkest: var(--color-hogpoint-blue4); /* ========================================================================= Colors: UI abstractions (semantic) ========================================================================= */ --color-canvas: oklch(var(--lch-canvas)); --color-link: oklch(var(--lch-blue-dark)); --color-negative: oklch(var(--lch-red-dark)); --color-positive: oklch(var(--lch-green-dark)); --color-selected: oklch(var(--lch-blue-lighter)); --color-selected-dark: var(--color-blue-light); --color-highlight: oklch(var(--lch-yellow-lighter)); --color-marker: oklch(var(--lch-red-medium)); /* ========================================================================= Colors: Domain-specific (sow lifecycle stages) ========================================================================= */ --color-servicing: var(--color-hogpoint-orange); /* Løbning - breeding/insemination */ --color-farrowing: var(--color-hogpoint-green); /* Faring - giving birth */ --color-weaning: var(--color-hogpoint-yellow); /* Fravænning - piglet separation */ --color-treatment: var(--color-hogpoint-purple); /* Genbehandling - medical treatment */ --color-slaughter: var(--color-hogpoint-slaughter-red); /* Slagteliste - darker red */ --color-slaughter-light: var(--color-hogpoint-slaughter-red2); /* Slagteliste - lighter red (menu) */ /* Lightest variants for form backgrounds */ --color-servicing-lightest: oklch(var(--lch-hogpoint-orange-lightest)); --color-treatment-lightest: oklch(var(--lch-hogpoint-purple-lightest)); --color-movement-lightest: oklch(var(--lch-hogpoint-blue2-lightest)); --color-slaughter-lightest: oklch(var(--lch-hogpoint-slaughter-lightest)); }