/* ============================================================================ * tokens.css — the palette contract. * * This is the ONE file you rewrite when you retheme. Everything else consumes * these names and never hard-codes a colour, a radius or a shadow. * * The concept: a sunny kitchen in the morning. Warm cream paper, honey for * the thing you press, herb green for "yes, you have it", warm brown ink that * reads as printed rather than as screen-black. * * Brand weight sits on exactly three colours — cream, honey, ink. Everything * else is semantic or structural. A palette with fifteen equal colours means * nothing, and this app already has to show two hundred pieces of food and * equipment art without turning into a fruit salad; the shell has to stay * quiet so the food can be the colourful thing. * ========================================================================= */ :root { /* --- surfaces: page, raised card, sunken well -------------------------- * --bg is warm cream, not white. It is the single decision that makes the * whole app read as a kitchen rather than as a form, and it has to stay in * a narrow band: any warmer and the food art starts to look jaundiced * against it (test against the carrot, the potato and the banana, which are * the three that go first), any cooler and it is just grey. */ --bg: #fffaf0; --bg-raised: #ffffff; --bg-sunken: #fdf1dc; /* --- ink: body copy, secondary, barely-there -------------------------- * Warm dark brown rather than #000: printed ink on cream paper is never * neutral, and a true black on this background reads as a screenshot pasted * onto the page. * * The ramp is tuned for CONTRAST as well as for looks. --ink-faint carries * the smallest text in the app (0.7rem labels, 0.76rem amounts) and an * earlier, prettier version of it sat at about 2.9:1 against the paper, * which is unreadable in a sunlit kitchen — the exact place this app is * used. Every step here clears 4.5:1. */ --ink: #38291a; --ink-soft: #6b5636; --ink-faint: #8a7350; /* --- accent: honey ------------------------------------------------------ * THE ACCENT IS TWO TOKENS AND THEY ARE NOT INTERCHANGEABLE. This is the * one thing in the file that will trip up a future session, so: * * --accent is a FILL. Button backgrounds, the active chip, the * progress bar, the today marker, the icon plate. * --accent-ink is accent-coloured TEXT on the paper background. The * active tab label, ingredient amounts, the favourite star. * * They differ because honey is a light colour. At the brightness that makes * a button look sunny rather than muddy, honey-on-cream text sits at about * 2:1 — invisible — and white-on-honey button text is barely better. So the * fill is bright, the text on that fill is near-black (--accent-contrast), * and accent-coloured text on paper uses the deeper --accent-ink. * * If you retheme to a DARK accent, all three can collapse back to one * value. Do not collapse them while the accent is light. */ --accent: #f0a92b; --accent-soft: #d9911c; /* pressed / hovered fill */ --accent-contrast: #3a2a12; /* text ON --accent */ --accent-ink: #9a5f0e; /* accent-coloured text on --bg */ /* A wash of the accent, for selected rows and active tints. Kept as a token * rather than an inline color-mix() so the whole app shifts together. */ --accent-wash: #fdeecb; /* --- structure --------------------------------------------------------- */ --line: #f0e0c2; --line-strong: #dcc59a; /* --- semantic only. Never brand. -------------------------------------- * --good has a specific job here: "you already have this". It is the colour * of the pantry tick, and it is deliberately a herb green rather than a UI * green so it sits with the food art instead of on top of it. * * --need is "you still need this" — the grocery-list state. It was amber in * the first palette, which stopped working the moment the brand accent * became honey: the two were near-identical, so "still to buy" looked like * "selected". It is now clay. Clay also has to stay clear of --bad below; * they are never adjacent on screen (--bad only appears on destructive * buttons inside sheets), but they are far enough apart to be told apart if * they ever meet. * * Needing an onion is not an error, which is why --need is not red. */ --good: #4a8a4e; --good-bg: #e9f3e6; --need: #c4562e; --need-bg: #fbe8dd; --bad: #93302e; --bad-bg: #f9e7e4; /* --- shape ------------------------------------------------------------- */ --radius: 16px; --radius-sm: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(56 41 26 / 0.05); --shadow-md: 0 2px 6px rgb(56 41 26 / 0.06), 0 10px 24px -12px rgb(56 41 26 / 0.16); --shadow-lg: 0 6px 16px rgb(56 41 26 / 0.10), 0 20px 44px -16px rgb(56 41 26 / 0.22); /* --- type -------------------------------------------------------------- * System stack, so there is no webfont request and no flash. --font-display * is a system SERIF and that is the one piece of type doing identity work: * recipe titles set in a serif read as a cookbook, and the same titles in * the UI sans read as a to-do app. It costs nothing because every platform * already ships one. */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* --- safe areas -------------------------------------------------------- * Behind variables so every anchored element derives from ONE number, and * so you can fake a notched device in devtools by overriding these two. * * NOTE: --safe-b is the iOS home indicator, NOT a browser URL bar. In a * standalone PWA there is no URL bar, so nothing should ever pad on top of * this value "just in case". */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); /* --- chrome heights, so content can clear them ------------------------ */ --topbar-h: 56px; --tabbar-h: 58px; /* --- ingredient category tints ---------------------------------------- * Every ingredient tile sits on the tint of its category, which is also its * aisle in the grocery list. This does real work: it is what makes a * fifty-item shopping list scannable, because your eye finds "the green * block" long before it reads "Produce". * * These are deliberately PALE. They are a background for food art, not a * colour scheme — at full saturation the tile fights the tomato sitting on * top of it and you can no longer tell what the picture is. If you retune * these, check them behind the leafy greens and the herbs first; those are * the art most easily lost against a tinted ground. */ --cat-produce: #e6f0dc; --cat-fruit: #ffe6d2; --cat-protein: #fbe0e0; --cat-dairy: #fdf2d6; --cat-grain: #f8ecd4; --cat-spice: #f6e6d4; --cat-pantry: #efeade; --cat-frozen: #dfeef5; --cat-bakery: #f9e8cf; --cat-drinks: #e9eaf3; --cat-other: #f2ece2; /* --- equipment tint ---------------------------------------------------- * Deliberately COOL and slightly grey, alone among the tints. Equipment is * the one set of pictures in the app that is not food, and the ground it * sits on is what says so before you have read a single label — a blender * on a warm produce green reads as a smoothie, which is exactly the wrong * idea. Keep it cool if you retune it. */ --cat-tool: #e9eaef; } /* --------------------------------------------------------------------------- * Multi-theme, if the app ever wants it: redefine the SAME token names under * a [data-theme] block and apply the attribute from the inline