/* Design tokens — the ONLY :root block in the app. Every stylesheet loads this file first (see each HTML shell's ) and reads colors/spacing/type from these custom properties, never a literal. polish-02: consolidated from shared/style.css's original 14-token block. --free-ink/--booked-ink/--hold-ink were darkened from their original values (see git history) to clear WCAG AA contrast (4.5:1) on their -bg pairs for small calendar-cell text; everything else is unchanged from the original palette. */ :root { /* brand */ --leaf: #14532d; --leaf-dark: #0d3b20; --marigold: #f5a623; --paper: #fdf8f0; --card: #ffffff; --ink: #2b2b26; --muted: #8a8578; --border: #e8e1d0; /* calendar / booking status */ /* discover-tune-05: darker TEXT shade of the ONE green family (see --green below) -- was #0f7a3a; #1e7a43 matches the committed reference exactly and still clears 4.5:1 AA on --free-bg (4.72:1, was 4.78:1) so the Diary's small calendar-cell text stays compliant. This is a shared token: the value change is visible on the Diary too (same "propagates by design" pattern as Booked's grey, venue-restyle-02), not a discovery-only tweak. */ --free-ink: #1e7a43; --free-bg: #e6f4ea; /* venue-restyle-02 (2026-07): Booked = calm grey: a mostly-booked month must not read as a wall of red errors. Red stays reserved for destructive/error UI. Applies everywhere via this token (Diary + public). tokens-cleanup-03: Booked ink is darker than the reference chip grey: Diary calendar cells are small text for 50-60-y/o eyes -- must hold ~5:1 on --booked-bg. Keep >= 4.5:1 if ever retuned. */ --booked-ink: #5f635c; --booked-bg: #eceae4; /* diary-fix-03: hold amber retuned #B4720E -> #925E0B. The old value measured 3.42:1 on --hold-bg / 3.31:1 on the Diary's grey card / 3.92:1 on white -- all below the sec.8 4.5:1 small-text floor (the previous comment's "clears 4.5:1" claim was inherited from the pre-redesign #8a5a0e amber, which did clear at 5.94:1, and was never re-measured after diary-redesign-01 swapped in #B4720E). #925E0B measures 4.78:1 / 4.63:1 / 5.49:1 (WCAG relative luminance). Cross-surface by design (sec.2.3): one value for Diary + public + admin, same propagation as the Booked-grey retune. Keep >= 4.5:1 on all three backgrounds if ever retuned again. */ --hold-ink: #925E0B; --hold-bg: #FBEED6; /* named strays */ --alert-border: #f0c98a; --topbar-accent: #d7e9db; --radius: 14px; --shadow: 0 2px 10px rgba(43, 43, 38, 0.08); /* spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* type scale */ --text-sm: 0.8rem; --text-base: 0.95rem; --text-lg: 1.3rem; --text-xl: 1.6rem; /* PWA manifest can't read CSS custom properties — these two are duplicated as literals in diary-manifest.webmanifest. Keep in sync if --leaf or --paper ever change. (diary-redesign-01: the Diary's own manifest literals — theme_color #0D1226, background_color #FFFFFF — mirror the "midnight" theme's fixed identity, not this app-wide pair; per-user Diary theme picks never change the installed icon/splash, so update those two literals by hand only if the DEFAULT theme changes.) */ --theme-color: var(--leaf); --bg-color: var(--paper); /* brand-sweep-04 unified the two WhatsApp greens into one --wa: #25a656. discover-tune-05 widens that token's job: it's now also the tile logo's "live" dot (was a separate --live: #2fbf6b, retired), so it's renamed --green to describe what it actually is -- ONE accent green family. --free-ink above is this family's darker TEXT shade (AA on white/free-bg); no other greens exist anywhere in the app. */ --green: #25a656; /* ss-04d: Verified badge blue -- global (not --disc-* namespaced) since it's explicitly shared by both `/` and `/v/`, unconditionally on every venue (no schema signal exists; becomes conditional only if self-signup ships and an actual verified flag is added). */ --verified: #1d9bf0; /* discover-restyle-01 (2026-07): Midnight/Champagne brand, shared by the discovery home (`/`) and the venue page (`/v/`) as of venue-restyle-02/tokens-cleanup-03 -- the old --disc-* block both pages used to draw from is retired. --home-ink/--home-muted stand in for the source design's bare --ink/--muted: the app already has global --ink/--muted (Diary/admin, shared/style.css) at different values -- reusing those names as-is would silently recolor the Diary. Gold has exactly 4 jobs on discovery: brand mark (tile + the q of Vooqing), selected date, pick-a-date tint, Call. Never add a fifth. */ --brand: #141b33; --brand-on: #f0ece0; /* discover-tune-05: seamless top edge -- a vertical fade to transparent OVER the diagonal, so the bar's very top pixel is flat #0D1226, matching the theme-color meta exactly (browser chrome blends into the header with no visible seam). */ --brand-grad: linear-gradient(180deg, #0d1226 0%, rgba(13, 18, 38, 0) 55%), linear-gradient(100deg, #0d1226 0%, #1b2550 52%, #2e3a73 100%); --cta: #c9a04a; --cta-on: #241b05; --gold-tint: #f6ecd6; --gold-ink: #8a651f; --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Inter", system-ui, sans-serif; --bg: #ffffff; --surface: #ffffff; --home-ink: #1b2030; /* public-fix-02 (X-03a): retuned #7d8190 -> #6e7280. The old value was 3.88:1 on white -- below DESIGN_SYSTEM sec.8's 4.5:1 small-text floor -- and every consumer is small muted text (<=14px) on white/near-white. #6e7280 is 4.79:1. Now equals --muted-strong (kept for its tagline consumer); both are the one compliant public muted grey. */ --home-muted: #6e7280; --muted-strong: #6e7280; /* venue-restyle-02 (2026-07) + tokens-cleanup-03: neutrals shared by discovery + venue page -- no existing token matched these values, so they're namespaced rather than reusing --border (Diary's, different value). --page-hair/--page-chip were --venue-* until tokens-cleanup-03 finished migrating home.css's own hairlines/chips onto them too. --venue-page-bg stays venue-only: the venue page has a separate "outside the white card" backdrop (phone-frame-style layout); discovery's .app/body already share one --bg (no such backdrop concept there). Ink/muted/fonts/brand/gold/status are NOT duplicated here -- both pages reuse --home-ink/--home-muted (byte-identical to this brand's values), --font-display/--font-body, --cta/--gold-*, and the shared --free-ink/--hold-ink/--booked-ink status tokens directly, same as Diary. */ --page-hair: #e8e6e0; --page-chip: #f3f2ee; --venue-page-bg: #f2f1ee; } /* /for-venues page-local tints (fv- namespace; illustrative visuals only, never availability UI). Registered in DESIGN_SYSTEM.md §2. */ :root{ --fv-bubble-bg:#EFF3F0; --fv-miss-bg:#FBECEC; --fv-miss-ink:#8C3A3A; --fv-card-border:#E7E4DD; --fv-phone-border:#E3E1DB; --fv-photo-a:#C9C2AE; --fv-photo-b:#E9E5D8; } /* ---- Booking Diary: theme-token layer (diary-redesign-01) ---- Scoped to [data-diary-theme] (set on by diary-app.js only, never present outside the Diary shell) so it can never leak into admin/public/ discovery. --paper/--card/--border below override tokens.css's Diary-era green defaults with the new constant white/cream content surface used by every theme; --d-* are the per-theme brand-chrome variables consumed by diary-shell.html's header only (buttons/borders still read --leaf/ --marigold for now -- see diary-redesign-01 recon note on shared CSS with admin; repointing those is a later prompt). */ [data-diary-theme]{ --paper:#FFFFFF; /* diary-themetint: every Diary card surface is a soft tint of the chosen design colour (was fixed bluish #E9ECF1) so it matches each theme across Home/Calendar/Bookings. Fallback keeps it valid before a theme resolves. */ --card: color-mix(in srgb, var(--d-brand, #141B33) 7%, #FFFFFF); --card-border:#DFE3EA; --border:#EFE7D6; /* diary-fix-03: Diary-scoped muted. The app-wide --muted (#8a8578, :root above) measures 3.68:1 on this layer's white --paper and 3.11:1 on the grey --card -- below the DESIGN_SYSTEM sec.8 4.5:1 small-text floor. #646977 measures 5.48:1 / 4.63:1 (WCAG relative luminance). Scoped here -- the same mechanism as --paper/--card above -- so admin's own --muted consumers are untouched. Note the public --muted-strong (#6E7280) was NOT reused: it's only 4.05:1 on this grey card. */ --muted:#646977; /* diary-gold-constant: the brand gold — CTA buttons (--d-cta: Save, Confirm, Call, QR, Add-space) and the app-icon tile (--d-mark) — stays gold in EVERY theme. Only --d-brand / --d-grad change with the chosen design. !important overrides each per-theme block's own --d-cta / --d-mark. */ --d-cta:#C9A04A !important; --d-on-cta:#241B05 !important; --d-mark:#C9A04A !important; } /* diary-polish-06: re-angled from 105deg (diagonal -- made the header's own top edge lighter on one side than the other, a visible seam against the status bar) to 160deg, darkest stop pinned to 0% (top) so the whole top edge is uniformly dark, lightening downward. Same colour stops as before for every theme except sandalwood (see its own note below). --d-statusbar is the same colour as each gradient's 0% stop, read by applyDiaryTheme() in diary-app.js to sync . */ [data-diary-theme="midnight"]{ --d-grad:linear-gradient(160deg,#0D1226 0%,#1B2550 55%,#2E3A73 100%); --d-statusbar:#0D1226; --d-brand:#141B33; --d-on:#F0ECE0; --d-cta:#C9A04A; --d-on-cta:#241B05; --d-mark:#C9A04A; } [data-diary-theme="ink"]{ --d-grad:linear-gradient(160deg,#33241C 0%,#5A4234 100%); --d-statusbar:#33241C; --d-brand:#3A281F; --d-on:#F3E7D3; --d-cta:#33241C; --d-on-cta:#FBF7EF; --d-mark:#4A352A; } [data-diary-theme="aubergine"]{ --d-grad:linear-gradient(160deg,#241029 0%,#55305F 100%); --d-statusbar:#241029; --d-brand:#3E1F47; --d-on:#F1E7F0; --d-cta:#4A2456; --d-on-cta:#F3E9F5; --d-mark:#4A2456; } [data-diary-theme="terracotta"]{--d-grad:linear-gradient(160deg,#7A2E17 0%,#A5452A 100%); --d-statusbar:#7A2E17; --d-brand:#8A3D22; --d-on:#F8ECE6; --d-cta:#8A3D22; --d-on-cta:#F8ECE6; --d-mark:#A5452A; } [data-diary-theme="peacock"]{ --d-grad:linear-gradient(160deg,#0A3C46 0%,#166B78 100%); --d-statusbar:#0A3C46; --d-brand:#0F5460; --d-on:#EAF4F5; --d-cta:#0F5460; --d-on-cta:#EAF4F5; --d-mark:#166B78; } [data-diary-theme="oxblood"]{ --d-grad:linear-gradient(160deg,#3E1522 0%,#65203A 100%); --d-statusbar:#3E1522; --d-brand:#57203A; --d-on:#F5E4E9; --d-cta:#57203A; --d-on-cta:#F5E4E9; --d-mark:#65203A; } [data-diary-theme="indigo"]{ --d-grad:linear-gradient(160deg,#20205A 0%,#3A3A9A 100%); --d-statusbar:#20205A; --d-brand:#2A2A6E; --d-on:#E7E7F5; --d-cta:#33338A; --d-on-cta:#E7E7F5; --d-mark:#3A3A9A; } /* diary-redesign-04 a11y pass: lighter gradient stop deepened from #8272B8 (--d-on/#F1ECF8 was 3.58:1, below 4.5:1) to #7260A0 (4.64:1). --d-mark left at the original #6E5CA6 (already-passing contrast against the white calendar page, unrelated to this header-text fix). */ [data-diary-theme="lavender"]{ --d-grad:linear-gradient(160deg,#5E4E96 0%,#7260A0 100%); --d-statusbar:#5E4E96; --d-brand:#544593; --d-on:#F1ECF8; --d-cta:#544593; --d-on-cta:#F1ECF8; --d-mark:#6E5CA6; } /* diary-redesign-04 a11y pass deepened the then-lightest stop #A98A5E -> #80613C (4.98:1 vs --d-on). diary-polish-06 then swapped the stops to keep the darkest colour at 0%/top (seam fix) -- which silently moved #8A6E48, a stop the 04 pass never deepened, into the light-end contrast position: --d-on measured only 4.17:1 against it (regression). diary-fix-03: the 100% stop is re-deepened #8A6E48 -> #856740 -- 4.58:1 vs --d-on (WCAG relative luminance) AND still lighter than the #80613C top stop, so BOTH constraints hold at once: the sec.8 floor against the gradient's lightest stop, and sec.2.5's darkest-stop- pinned-to-top seam rule. If either stop is ever retuned, re-check both constraints together. --d-mark stays #A98A5E (mark tile background, not header text -- unrelated contrast context, per 04). */ [data-diary-theme="sandalwood"]{--d-grad:linear-gradient(160deg,#80613C 0%,#856740 100%); --d-statusbar:#80613C; --d-brand:#6B502E; --d-on:#F7EFE1; --d-cta:#5A4028; --d-on-cta:#F7EFE1; --d-mark:#A98A5E; } [data-diary-theme="charcoal"]{ --d-grad:linear-gradient(160deg,#1F1E1D 0%,#333230 100%); --d-statusbar:#1F1E1D; --d-brand:#2A2926; --d-on:#ECEAE5; --d-cta:#33312E; --d-on-cta:#ECEAE5; --d-mark:#333230; }