/* ============================================================================ shared/tokens.css — the only file that defines a colour or a size constant. Every other stylesheet consumes these. Change a value here, it changes everywhere: customer browse, kitchen mini-site, cook portal, admin. Two palettes: :root the marketplace chrome — yellow, near-black, cool greys .theme-kitchen the warm "home kitchen" palette used on a cook's own mini-site, so their page feels like theirs and not like a search result. Carried over from v5's Part A tokens. ========================================================================== */ :root { /* brand */ --primary-yellow: #F7CA53; --primary-yellow-hover: #f5be32; --dark-black: #0F0F11; /* surfaces */ --bg-light: #F8F9FA; --surface: #FFFFFF; --surface-sunken: #F4F4F5; --border-color: #E4E4E7; --border-strong: #D4D4D8; /* text */ --text-dark: #18181B; --text-muted: #71717A; /* status — used by order states, availability, portal chips */ --ok-bg: #F0FDF4; --ok-fg: #15803D; --warn-bg: #FEF3C7; --warn-fg: #92400E; --danger-bg: #FEF2F2; --danger-fg: #B91C1C; --info-bg: #EFF6FF; --info-fg: #1D4ED8; /* layout */ --sidebar-width: 240px; --header-h: 76px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ONE tile height for the whole platform. Every browse tile and every buy tile is this tall — seller cards, product tiles, dish cards. If a tile needs to be taller, change it here and it changes everywhere, which is the point. */ --tile-h: 352px; --tile-h-sm: 320px; /* below 760px */ /* The media box gets an EXPLICIT height, not an aspect-ratio. aspect-ratio is ignored once a child gives the box a definite size, and an with height:100% inside an indefinite parent resolves to auto — so the image's own intrinsic height wins and the tile stretches. A fixed height plus an absolutely positioned image removes the circularity entirely. */ --tile-media-h: 188px; --tile-media-h-sm: 168px; --hero-media-h: 236px; /* seller banner — same reasoning as the tiles */ --hero-media-h-sm: 180px; /* elevation */ --shadow-card: 0 2px 8px rgba(0,0,0,.06); --shadow-lift: 0 8px 18px rgba(0,0,0,.08); --shadow-modal: 0 24px 60px rgba(0,0,0,.22); /* type */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Fraunces, Georgia, "Times New Roman", serif; } /* The cook's own page. v5 applied this via body.kitchen-view; in v6 the mini-site is its own document, so it is a class you can put on or on any container that should read as "inside a kitchen". */ .theme-kitchen { --brand: #E07A2E; --brand-pressed: #C4661F; --cream: #FBF5EE; --ink: #2E2018; --ink-soft: #8C6D57; --primary-yellow: var(--brand); --primary-yellow-hover: var(--brand-pressed); --dark-black: var(--ink); --bg-light: var(--cream); --surface-sunken: #F3E9DE; --text-dark: var(--ink); --text-muted: var(--ink-soft); } /* Fallbacks so components written against the warm names still work when they appear outside a kitchen page (e.g. a dish card in search results). */ :root { --brand: var(--primary-yellow); --brand-pressed: var(--primary-yellow-hover); --cream: #FFFBF2; --ink: var(--text-dark); --ink-soft: var(--text-muted); } body.theme-kitchen, body.kitchen-view { background: var(--cream); font-family: var(--font-sans); }