/* Shapo v4 design tokens — adds accent green + extends v3 */ :root { /* Spacing */ --chapo-space-1: 0.25rem; --chapo-space-2: 0.5rem; --chapo-space-3: 0.75rem; --chapo-space-4: 1rem; --chapo-space-5: 1.5rem; --chapo-space-6: 2rem; /* Radii */ --chapo-radius-sm: 6px; --chapo-radius-md: 10px; --chapo-radius-lg: 14px; --chapo-radius-xl: 18px; --chapo-radius-pill: 999px; /* Top bar. The shared context bar and the catalog's merged search card are the same frame with different contents, so their padding and their inner control height are ONE number each — hand-matching them has drifted twice already, each time as a "the catalog bar is a different size" report. */ --chapo-bar-pad-block: 0.7rem; --chapo-bar-pad-inline: 0.75rem; --chapo-bar-control: 40px; /* One radius for every catalog product card (the legacy sheet and the v4 override used to fight over 22px vs radius-lg). */ --chapo-card-radius: 14px; /* Layout */ /* NOTE: there is deliberately no context-bar height token. The bar is content-sized (~71px, and taller when the address wraps or text is scaled), so any constant here is a guess that clips whatever sticks beneath it — the old 56px token was unused for exactly that reason. To pin something below the bar, use --chapo-ctxbar-offset, measured at runtime by chapoCatalog.syncContextBarHeight (storage.js). */ --chapo-bottom-tabs-height: 64px; --chapo-content-max-width: 760px; /* Desktop (≥992px) only: width of the side navigation rail. Unused below the breakpoint, so it has no effect on the mobile layout. */ --chapo-sidebar-width: 248px; /* Z. --chapo-z-modal is 1100 because that is what V4Modal actually paints at. It used to say 1050 while V4Modal hard-coded 1100, so the two overlays that position themselves RELATIVE to this token — the hand-off lock (+40) and the generate progress (+30) — computed 1090 and 1080 and rendered UNDERNEATH the very modal they are meant to cover. The lock is the one that says "do not touch anything, a cart is being built", so being behind a modal is the worst possible place for it. Anything layering above a modal must derive from this token, never from a number typed next to it. */ --chapo-z-context-bar: 100; --chapo-z-bottom-tabs: 200; --chapo-z-modal: 1100; /* Motion — durations/easings for every transition and animation in the app. fast = taps + state changes; base = modal exit / tab cross-fade; slow = modal enter (sheet) / page slide. Exit durations must stay in step with ChapoMotion.ModalExitMs (the C# unmount delay). */ --chapo-duration-fast: 120ms; --chapo-duration-base: 200ms; --chapo-duration-slow: 280ms; /* Bottom sheets get their own pair: long enough to read as a rise from the bottom edge, short enough that nobody waits for it. */ --chapo-duration-sheet: 340ms; --chapo-ease: cubic-bezier(0.2, 0, 0, 1); --chapo-ease-decel: cubic-bezier(0, 0, 0, 1); --chapo-ease-accel: cubic-bezier(0.3, 0, 1, 1); --chapo-motion-shift: 16px; /* Page navigation. A gentler decelerate than --chapo-ease-decel, which starts at maximum velocity and stops dead — fine for a 200ms modal, but over a page-sized travel it reads as a snap rather than a glide. */ --chapo-ease-nav: cubic-bezier(0.32, 0.72, 0, 1); /* Same family as the nav curve: most of the travel happens early, then it settles. A plain decel over a full sheet-height feels like it drifts in. */ --chapo-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* How far a page travels on navigation. Small on purpose: see chapo-motion.css. */ --chapo-nav-shift: 26px; /* One duration for every navigation, so no two route changes feel different. */ --chapo-duration-nav: 260ms; /* Page cross-fade. Steep through the middle so the two layers spend as little time as possible both half-visible. Must be used by BOTH layers — that is what keeps their opacities summing to 1. */ --chapo-ease-fade: cubic-bezier(0.7, 0, 0.3, 1); /* Type scale */ --chapo-text-xs: 0.75rem; --chapo-text-sm: 0.875rem; --chapo-text-base: 1rem; --chapo-text-lg: 1.125rem; --chapo-text-xl: 1.25rem; --chapo-text-2xl: 1.5rem; --chapo-shadow-sm: 0 1px 2px rgba(20,18,12,0.04); --chapo-shadow: 0 2px 8px rgba(20,18,12,0.06), 0 1px 2px rgba(20,18,12,0.04); --chapo-font-sans: "Inter","Heebo",system-ui,sans-serif; --chapo-font-heb: "Heebo","Inter",system-ui,sans-serif; --chapo-font-mono: "JetBrains Mono",ui-monospace,monospace; } /* Light mode (default) — same convention as app.css: the user's explicit in-app theme choice (data-bs-theme set by ThemeService/MainLayout) is the ONLY thing that flips colors. No prefers-color-scheme media query: it would let a dark OS override an explicit Light setting and render dark v4 tokens under a light Bootstrap theme. */ :root, [data-bs-theme="light"] { /* v4 surfaces */ --chapo-bg: #fafaf8; --chapo-surface: #ffffff; --chapo-surface-2: #f4f3ef; /* Catalog product photos are shot on white, so a grey frame put a visible box around every cut-out. White in light mode lets the product sit on the card cleanly; dark mode keeps a surface tone (white there would glare). */ --chapo-card-image-bg: #ffffff; --chapo-border: #e7e5df; --chapo-border-strong: #d8d5cd; --chapo-text: #1c1b18; --chapo-text-2: #5e5b54; --chapo-text-3: #8e8a81; /* v4 accent green (oklch from proposal) */ --chapo-accent: oklch(0.55 0.14 155); --chapo-accent-soft: oklch(0.95 0.04 155); --chapo-accent-ink: oklch(0.32 0.10 155); --chapo-warn: oklch(0.62 0.14 60); --chapo-warn-soft: oklch(0.96 0.04 80); --chapo-danger: oklch(0.58 0.16 25); /* Catalog card: deal-price highlight (Wolt's yellow sale pill — same in both themes, amber with near-black text, so a deal reads identically everywhere) and the low-availability pill. */ --chapo-price-highlight-bg: #fde68a; --chapo-price-highlight-fg: #3a2c00; --chapo-scarcity-bg: #fee2e2; --chapo-scarcity-fg: #b91c1c; } /* Dark mode — the app sets data-bs-theme="dark" on the .page wrapper (MainLayout). Match that selector so v4 tokens flip correctly. */ [data-bs-theme="dark"] { --chapo-bg: #16140f; --chapo-surface: #1f1d18; --chapo-surface-2: #2a2722; /* White in dark mode too, deliberately. Catalog photography is shot on white, so a dark panel does not read as "dark product photo" — it renders the JPEG's own white background as a hard-edged white rectangle floating inside a dark card, which is worse than the glare it was avoiding. Wolt does the same: white image panel, dark card body. Verified on the iOS simulator, where the seams were most obvious. */ --chapo-card-image-bg: #ffffff; --chapo-border: #34302a; --chapo-border-strong: #45413a; --chapo-text: #f5f3ee; --chapo-text-2: #b6b1a6; --chapo-text-3: #807b71; /* Tinted "soft" backgrounds and status colors must flip for dark mode too — otherwise the light cream/green/red soft fills render as bright boxes (often behind light text) on the dark surface. Keep the soft fills dark and tinted, and brighten the warn/danger foregrounds for contrast. */ --chapo-accent-soft: oklch(0.32 0.055 155); /* accent-ink is the "green text" used on accent-soft fills and surfaces. In light mode it's a deep green; on dark surfaces/soft fills that becomes green-on-green (invisible), so brighten it to a light green for dark mode. (White-background CTAs that rely on dark ink get a local override.) */ --chapo-accent-ink: oklch(0.86 0.11 155); --chapo-warn: oklch(0.80 0.13 75); --chapo-warn-soft: oklch(0.33 0.06 70); --chapo-danger: oklch(0.68 0.17 25); /* Deal pill stays amber-on-dark-ink (see light block); only scarcity flips. */ --chapo-scarcity-bg: #4a1d1d; --chapo-scarcity-fg: #fca5a5; }