/* ========================================================================== Foodini design tokens — single source of visual truth. Generated from docs/design/DESIGN-SYSTEM.md §3. Do not hardcode colors, spacing or radii in page CSS — pull from these custom properties. Load AFTER Bootstrap (and after style.css) so these rules win. ========================================================================== */ /* ---- Type: Manrope, self-hosted (variable font, weights 400–800) ---- */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Brand (2026-07 rebrand: company pivoted from orange to the logo green — one green everywhere, no orange anywhere) ---- */ --brand: #8DC63F; /* Foodini green (logo wordmark + mark) */ --brand-600: #5C9021; /* legacy accent remap (darker, white-text-safe-ish) */ --brand-hover: #79B32E; /* hover/pressed fills — keeps AA with --on-brand */ --brand-ink: #4E7E15; /* green for TEXT/borders on white — AA 4.5:1; the lime --brand itself is fills-only */ --brand-050: #F2F9E6; /* tint background for selected/active */ --on-brand: #1E3305; /* text/icon on lime fills (white fails AA) */ --brand-green: #8DC63F; /* alias kept for existing promo-strip rules */ --on-brand-green: #1E3305; /* ---- Neutrals (warm-tinted, NOT beige) ---- */ --bg: #FFFFFF; /* page background */ --bg-subtle: #F7F7F6; /* section/alt background */ --surface: #FFFFFF; /* cards, sheets */ --border: #ECEBEA; /* hairlines, card borders */ --border-strong:#DAD9D7; --text: #1A1A1A; /* primary text (near-black, not #000) */ --text-muted: #6B6B6B; /* secondary */ --text-subtle: #767676; /* captions, placeholders — S4-3: was #9A9A9A = 2.81:1 on white, failed AA. #767676 = 4.54:1 (AA min). Its purpose is real caption text (review counts, opening hours), so it must pass; placeholders inherit the same value (WCAG-exempt anyway). */ /* ---- Semantic (STATE ONLY, not decoration) ---- */ --success: #1BA672; --success-050: #E7F6F0; --warning: #E8930C; --warning-050: #FCF1DF; --danger: #E5484D; --danger-050: #FCE9EA; /* -ink twins = the ONLY status colors allowed as TEXT (same fills-vs-text split as --brand/--brand-ink). Each passes AA on --surface AND on its own -050 chip: danger 5.68/4.86, success 5.35/4.80, warning 5.52/4.94. The base colors fail as text (--danger 3.91, --success 3.11, --warning 2.44 on --surface) — fills/borders/icons only (3:1 non-text). */ --danger-ink: #C02F35; --success-ink: #0E7A52; --warning-ink: #8F5F00; /* ---- Radii (ONE scale — buttons/chips: pill, cards: lg, inputs: md) ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* ---- Spacing (4px base) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* ---- Elevation (soft, tinted — never pure black) ---- */ --shadow-sm: 0 1px 2px rgba(26,26,26,.06), 0 1px 1px rgba(26,26,26,.04); --shadow-md: 0 4px 16px rgba(26,26,26,.08); --shadow-lg: 0 12px 32px rgba(26,26,26,.12); /* ---- Type ---- */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- Layout ---- */ --container: 1200px; --header-h: 64px; /* Mobile bottom nav height. Was a bare 56px repeated in four places (components: .fdn-toaster, .fdn-bottom-nav__item, the body padding reservation, the My Account sticky Save bar) — one of which had drifted out of agreement with the others. */ --bottom-nav-h: 56px; /* ---- Z-index scale (don't spam z-999) ---- These are the REAL layers, not aspirations. --z-modal used to be 300 and had zero uses: the modal layer is Bootstrap's (backdrop 1040, dialog 1055/1060) and nothing was ever going to sit at 300. --z-toast used to be 400, i.e. BELOW the cart drawer (999), every Bootstrap modal, the Places autocomplete (1090), the review panel (1290) and the photo lightbox (2100) — so any toast fired while one of those was open was painted behind it and the user got no feedback at all. A toast is the topmost thing on the page by definition; 2200 clears the lightbox, the highest real overlay. --z-header/--z-drawer are unchanged: several rules derive from them relative to the raw 99 used by the full-screen dims. */ --z-header: 100; --z-drawer: 200; --z-modal: 1060; --z-toast: 2200; /* ---- Motion (one scale for hover/press/reveal). Durations are theme-agnostic; every rule that uses them must have a prefers-reduced-motion: reduce counterpart. ---- */ --dur-1: 120ms; /* micro: press, tint, small state flips */ --dur-2: 200ms; /* standard: hover lift, fades */ --dur-3: 320ms; /* deliberate: reveals, staggers */ --ease-out: cubic-bezier(.2, .7, .3, 1); /* decelerate — most UI */ --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* slight overshoot — playful pops */ } /* The mobile header is 56px, not 64px. That was previously expressed as a raw 56px hand-patched onto three call sites, so var(--header-h) kept resolving to 64 inside every OTHER mobile rule — leaving the sticky restaurant chip row, its scroll anchor and the tablet toaster each 8px out of place (an 8px strip of page content scrolled visibly through the seam under the header). Redefining the token once fixes every consumer at the same time; the three hand patches were removed from foodini-components.css with this change. */ @media (max-width: 991.98px) { :root { --header-h: 56px; } } /* ========================================================================== Dark theme (2026-07-08, user mockups): html.fdn-dark re-points the neutral tokens at a dark olive-green ramp — every token-driven component flips for free; legacy hardcoded colors get scoped overrides in foodini-components.css (see the fdn-dark section there). The class is set BEFORE first paint by the localStorage bootstrap in inc/stylesheet.php and toggled by fdnThemeSet() (inc/script.php). ========================================================================== */ html.fdn-dark { color-scheme: dark; /* Bootstrap's own body variables — style.css's `.bg-body { background: #fff !important }` (the class) needs an !important counter in foodini-components.css; these cover every other --bs consumer. */ --bs-body-bg: #171E11; --bs-body-color:#F2F5EC; --bg: #171E11; /* page — very dark desaturated green */ --bg-subtle: #232C19; /* alt sections, chips, skeletons */ --surface: #202818; /* cards, sheets, drawers */ --border: #333E24; --border-strong:#465431; --text: #F2F5EC; --text-muted: #A9B29A; --text-subtle: #8A927E; /* S4-3: was #7E8770 = 4.05:1 on the dark --surface (#202818), under AA. #8A927E = 4.71:1 on surface, 5.28:1 on --bg. */ /* lime reads AA directly on the dark ground — ink can BE the brand */ --brand-ink: #9AD14E; --brand-050: #2A3717; /* selected/active tint */ --success-050: #173526; --warning-050: #3A2E14; --danger-050: #3A1D1E; /* dark -ink twins: AA on the dark --surface AND their -050 chips (danger 5.05/5.06, success 7.67/6.72, warning 8.11/7.07) */ --danger-ink: #EF6A6E; --success-ink: #3FCF96; --warning-ink: #F0B24E; --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25); --shadow-md: 0 4px 16px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); } /* ---- Base: one family for everything (DESIGN-SYSTEM §3 Typography) ---- */ body { font-family: var(--font-sans); } /* Prices and numeric columns line up (§3: tabular figures) */ .tabular-nums { font-variant-numeric: tabular-nums; }