@layer reset, base, components, modules, utilities, native, platform; /* * Brand tokens for the app register (dashboard, account, auth, kitchen). * Same palette as brand.css (public register), expressed as OKLCH triplets so * the Fizzy components can keep mixing alpha with oklch(var(--lch-…) / x). * HEX reference values live in DESIGN.md. */ :root { /* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */ --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px)); --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px)); --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px)); --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px)); /* Spacing (4px grid: 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64) */ --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); /* Text: Bricolage Grotesque (variable 400–800, loaded via brand.css) */ --font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: ui-serif, serif; --font-mono: ui-monospace, monospace; --text-xx-small: 0.6875rem; /* 11px VEG / labels in caps */ --text-x-small: 0.8125rem; /* 13px hints */ --text-small: 0.875rem; /* 14px descriptions */ --text-normal: 1rem; /* 16px text, prices, forms */ --text-medium: 1.1875rem; /* 19px dish / list titles */ --text-large: 1.5rem; /* 24px section titles */ --text-x-large: 2rem; /* 32px page titles */ --text-xx-large: 2.75rem; /* 44px figures */ /* Borders and shape: rectangular controls, 8px cards, 3px badges */ --border: 1px solid var(--color-ink-lighter); --radius-control: 4px; --radius-card: 8px; --radius-badge: 3px; /* Shadows: no heavy card shadow, a thin ring is enough */ --shadow: 0 0 0 1px oklch(var(--lch-ink-darkest) / 0.06), 0 1px 2px oklch(var(--lch-ink-darkest) / 0.06); /* Components */ --btn-size: 2.75rem; --footer-height: 2.65rem; --tray-size: clamp(12rem, 25dvw, 24rem); /* Focus rings for keyboard navigation: 3px, 4px offset */ --focus-ring-color: var(--color-link); --focus-ring-offset: 4px; --focus-ring-size: 3px; --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color); /* Dialogs */ --dialog-duration: 150ms; /* Easing functions from https://easingwizard.com/ */ --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); @media (max-width: 799px) { --tray-size: var(--footer-height); } /* Layout */ --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); --main-width: 1400px; /* Z-index */ --z-events-column-header: 1; --z-events-day-header: 3; --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: Light mode — warm paper and warm neutrals */ --lch-canvas: 97.03% 0.0111 89.7; /* #F8F5ED paper */ --lch-surface: 99.17% 0.0085 84.6; /* #FFFCF6 forms, panels */ --lch-ink-inverted: 97.03% 0.0111 89.7; --lch-ink-darkest: 25% 0.0072 67.5; /* #24211E ink */ --lch-ink-darker: 35.15% 0.0123 72.4; --lch-ink-dark: 49.64% 0.0166 74.3; /* #686158 muted */ --lch-ink-medium: 57.79% 0.023 74.5; /* #82786B control */ --lch-ink-light: 74.16% 0.0223 79.1; --lch-ink-lighter: 85.68% 0.0181 81.3; /* #D6CFC3 rule */ --lch-ink-lightest: 93.82% 0.0144 84.6; /* #EFEAE0 surface muted */ --lch-accent: 74.04% 0.1486 52; /* #F38D49 Ofenorange */ --lch-accent-hover: 69.39% 0.1542 50.6; /* #E67C36 */ --lch-accent-ink: 25% 0.0072 67.5; /* #24211E text on orange */ --lch-accent-soft: 94.2% 0.0334 66; /* #FCE8D5 */ --lch-link: 48.3% 0.1208 48.4; /* #934512 links, focus */ --lch-positive: 44.55% 0.0783 157.9; /* #286143 */ --lch-positive-soft: 94.66% 0.0147 142.2;/* #E8F0E7 */ --lch-negative: 48.8% 0.1478 28; /* #A3342C */ --lch-negative-soft: 94.7% 0.0208 36; /* #FBE9E4 */ /* Colors: Named */ --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-always-black: oklch(var(--lch-black)); --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: Abstractions */ --color-canvas: oklch(var(--lch-canvas)); --color-surface: oklch(var(--lch-surface)); --color-accent: oklch(var(--lch-accent)); --color-accent-hover: oklch(var(--lch-accent-hover)); --color-accent-ink: oklch(var(--lch-accent-ink)); --color-accent-soft: oklch(var(--lch-accent-soft)); --color-negative: oklch(var(--lch-negative)); --color-negative-soft: oklch(var(--lch-negative-soft)); --color-positive: oklch(var(--lch-positive)); --color-positive-soft: oklch(var(--lch-positive-soft)); --color-link: oklch(var(--lch-link)); --color-selected-light: oklch(var(--lch-accent-soft) / 0.6); --color-selected: oklch(var(--lch-accent-soft)); --color-selected-dark: oklch(var(--lch-accent)); --color-highlight: oklch(var(--lch-accent-soft)); --color-marker: oklch(var(--lch-negative)); } /* Dark mode - explicit theme choice overrides system preference */ html[data-theme="dark"] { --lch-canvas: 23.73% 0.0073 67.5; /* #211E1B */ --lch-surface: 27.57% 0.0094 67.4; /* #2B2723 */ --lch-ink-inverted: 25% 0.0072 67.5; --lch-ink-darkest: 97.03% 0.0111 89.7; /* #F8F5ED */ --lch-ink-darker: 90.59% 0.0179 81.3; --lch-ink-dark: 78.15% 0.0232 74; /* #C1B6A8 */ --lch-ink-medium: 65.57% 0.0334 72; /* #9E8E7B */ --lch-ink-light: 54.25% 0.0279 71.2; --lch-ink-lighter: 41.94% 0.0222 69.8; /* #554B40 */ --lch-ink-lightest: 31.35% 0.0136 67.3; /* #36302A */ --lch-accent-hover: 83.55% 0.116 62.6; /* #FFB877 */ --lch-accent-soft: 33.94% 0.0434 57.1; /* #493221 */ --lch-link: 83.55% 0.116 62.6; /* #FFB877 */ --lch-positive: 81.5% 0.0722 155.8; /* #9DD1AF */ --lch-positive-soft: 32.84% 0.0383 156.8;/* #243B2D */ --lch-negative: 83.69% 0.0907 31.6; /* #FFB4A5 */ --lch-negative-soft: 32.53% 0.0459 30; /* #492B26 */ --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.35), 0 1px 2px oklch(var(--lch-black) / 0.4); } /* Light is the default. Dark only via the footer toggle (html[data-theme="dark"]). */