/* ========================================================================= TOKENS - the single normative source of design values. Loaded first by every page, before system.css and the page file. Never hardcode a value that duplicates one of these. ========================================================================= */ :root { /* ----- Colors: paper tones (surfaces) ----- */ --paper: #FBF9F3; --paper-2: #F4E8CC; --paper-3: #EFE0BA; /* Blush: a warm rose-tinted field that sits BEHIND a paper-2 card. Warmer than --paper, which reads cool once a buttery card floats on it. It is a BACKDROP tone, not a card surface — `/auth/callback`'s field is the only consumer (auth.css). The landing's own card used it as a surface until 2026-09-03 and now wears --paper-2 like every other card in the app: on the page where the card IS the offer, a rose panel read as another product's UI sitting on Bakery Form's paper. */ --blush: #F9F2F0; /* ----- Colors: crust accents ----- */ --shortcrust: #E8C896; --shortcrust-dk: #D4A574; --crust: #B68A5A; --cocoa: #8B6F47; --cocoa-dk: #5C4033; /* ----- Colors: ink (text) ----- */ --ink: #3E2E22; --ink-soft: #6B5847; --ink-faded: #8C7860; /* ----- Colors: reserved saturation (meaning only) ----- */ --burgundy: #8B3A2E; --basil: #6B8E5F; --basil-hover: #5A7A4F; /* ----- Colors: RGB channels for translucent fills ----- The r,g,b of the tokens above, used ONLY as `rgb(var(--x-rgb) / )` for scrims/shadows/overlays where an opacity is needed. Changing a colour is a one-line edit here + its hex above, not a hunt through ~17 hand-written rgba() literals. Only the four colours that actually appear translucent have one; keep each value byte-identical to the hex. (Not every rgba() in the CSS uses these: the decorative blotches and the drop/stage tints use off-token colours deliberately — those stay literal.) ⚠ MUST be SPACE-separated, never commas. These triples are substituted into `rgb(var(--x-rgb) / )`, and `rgb(92, 64, 51 / .08)` mixes the legacy comma syntax with the modern slash — which is invalid, so the browser drops the whole declaration. Commas here silently turned every --shadow* into `none` and every scrim transparent (48 call sites). Verified in Chrome: CSS.supports('color', 'rgb(92, 64, 51 / .08)') === false, and with spaces the same declaration computes to rgba(92, 64, 51, 0.08). */ --ink-rgb: 62 46 34; /* #3E2E22 */ --cocoa-dk-rgb: 92 64 51; /* #5C4033 */ --paper-rgb: 251 249 243; /* #FBF9F3 */ --burgundy-rgb: 139 58 46; /* #8B3A2E */ --basil-rgb: 107 142 95; /* #6B8E5F */ /* ----- Colors: lines and input focus ----- */ --line: #D9C9A8; --line-soft: #E8DDC4; --focus-bg: #FBF5E5; /* ----- Colors: inset neutral (segmented-control track) ----- */ --surface-inset: #EAE0CE; /* ----- Elevation: always brown-tinted, never neutral gray ----- */ --shadow: 0 2px 6px rgb(var(--cocoa-dk-rgb) / .08); --shadow-md: 0 8px 24px rgb(var(--cocoa-dk-rgb) / .12); --shadow-cta: 0 3px 10px rgb(var(--ink-rgb) / .18); --shadow-cta-h: 0 5px 14px rgb(var(--ink-rgb) / .25); /* ----- Type ----- Outfit (geometric sans) for headings, Inter for text. It replaced Playfair Display, and one consequence is load-bearing: **Outfit has no italic**. Google Fonts ships weights 100-900 and no slanted cut, so `font-style: italic` on anything using `--heading` yields a browser-synthesized oblique — a geometric letterform mechanically sheared, which is visibly fake and which no test can see. The italic-burgundy accent motif was therefore retired with the serif: accents are now told apart by COLOUR (`--burgundy`) and weight. Body italic is unaffected and still in use — Inter has a real italic, and the hint/placeholder voice (`.field-hint`, `.input--italic`, the quiet empty states) is a different device from the accent. Two faces, one fallback family: if the webfonts fail, hierarchy rests on size and weight rather than on a serif/sans contrast. That is deliberate — picking a system serif as Outfit's fallback would make the failure mode look like a different design rather than like the same one unstyled. */ --heading: 'Outfit', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; /* ----- Type scale ----- Ten steps replacing 39 ad-hoc rem values. Not invented: each step is the value that was already used most often at that size (.78rem appeared 10 times, .85rem nine, 2.15rem is already the page title on three screens). Pick by ROLE, not by number — that is the whole point of naming them. The six body steps below 1rem were collapsed aggressively: at the 14px base, .82/.83/.84/.85/.86 span 0.56px in total, so they were never decisions, just drift. Heading steps stay further apart because there the difference is visible and carries hierarchy. */ --text-2xs: .68rem; /* uppercase micro-labels, badges, ribbons */ --text-xs: .73rem; /* meta lines, hints, notes, footers */ --text-sm: .78rem; /* secondary copy, captions, section descriptions */ --text-base: .85rem; /* form controls, chips, tiles — the UI default */ --text-md: .9rem; /* inputs, emphasised body */ --text-lg: .95rem; /* buttons, nav links, lead paragraphs */ --text-xl: 1.15rem; /* section titles (.sec-title, card names) */ --text-2xl: 1.4rem; /* block titles (library, detail headings) */ --text-3xl: 1.7rem; /* large display (font previews, overlay titles) */ --text-4xl: 2.15rem; /* page titles */ --text-5xl: 2.9rem; /* hero METRIC only — a number read before any heading. One step above the page title deliberately: on /account the balance outranks the h1, because "how many creations are left" is the question that page is opened to answer and the only one that leads to an action. Not a heading size — nothing set in prose should reach it. */ /* ----- Shape ----- */ --radius-xs: 8px; /* between sm and md; the .btn--square / segmented / menu corner */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 99px; /* ----- Motion ----- Two families: durations and a shared easing. `--dur-fast` (.15s) is the default hover/focus tween — the overwhelmingly common value; `--dur-base` (.2s) is a touch slower for larger moves (buttons, carets); `--dur-slow` (.3s) is for panels/drawers. One-off durations that carry meaning (the 1s/2s cookie-loader loops, the .14s menu slide) stay literal at their call site. `--ease` is the standard-decelerate curve used everywhere a named timing function is given. */ --dur-fast: .15s; --dur-base: .2s; --dur-slow: .3s; --ease: ease; /* ----- Spacing scale ----- The five steps below are the INSIDE of things: gaps between siblings, padding, the rhythm within one block. `--space-2xl` is the first step that separates two GROUPS rather than two elements, and it exists because the scale had no way to say that: `--space-xl` is already the common inner interval, so reusing it to divide the profile card's identity from its balance produced no contrast at all — the whole card read as one evenly-spaced list. Tight inside, generous between. */ --space-xs: .3rem; --space-sm: .5rem; --space-md: .8rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2.5rem; /* ----- Layout metrics ----- */ --topbar-height: 76px; --sidebar-width: 340px; /* ----- z-index scale ----- Named layers, low to high. Previously every overlay picked an arbitrary number (66, 69, 70, 200, 1000, 9999); these name the intent so a new overlay slots in instead of guessing. `--z-stage` is the floating chrome over a canvas; `--z-menu` every dropdown; then the fixed shell and the escalating modal layers. */ --z-stage: 6; --z-drop: 30; /* full-canvas overlays: drag-drop target, cookie loader */ --z-menu: 40; --z-topbar: 50; --z-drawer-fab: 60; --z-backdrop: 69; --z-drawer: 70; --z-mobile-menu: 100; --z-overlay: 200; /* The cookie panel and its collapsed disc. Above the mobile menu and the crop overlay (it must be reachable wherever the reader is), below --z-modal: if a confirm dialog opens the dialog is the thing being answered. */ --z-consent: 500; --z-modal: 1000; --z-toast: 9999; }