/* Mr Bucket design tokens — ADR-0019 as amended (Amendment 1, 2026-09-15). ONE source of truth for both front ends: the Jinja2 console imports this directly, and the React member client will import the same file. No component stylesheet names a colour or a typeface. ⚠ THE BRAND GUIDE IS LAW on customer surfaces (his ruling, 2026-09-15). Every brand colour below is read from the guide — `ingestion/[UPDATED] Mr Bucket-BrandGuide-250807.pdf`, p. 13 — and NOT from the storefront CSS these tokens used to copy. Where this file and the guide disagree, the guide wins and this file is wrong. Three kinds of value, each marked: (guide) from the brand guide. Not configurable — nobody configures the law away. (setting) a marketing setting (ADR-0020 Am. 1). The value here is only the DEFAULT; `/brand.css` overrides it from the database and refuses any save below 4.5:1. (house) not colour and not type — shape and spacing, which the guide does not govern. CONTRAST. Measured 2026-09-15, against --bg (#fffbf4) unless stated. */ @font-face { font-family: "Fraunces"; src: url("fonts/fraunces-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ⚠ Tagada is licensed (EULA in ingestion/Fonts/Tagada): WOFF2 through @font-face only, from our own server, never committed to git. A checkout without it falls back to Georgia — it degrades, it does not break. */ @font-face { font-family: "Tagada"; src: url("fonts/tagada/Tagada-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ---- Surfaces and ink ---------------------------------------------------- */ --bg: #fffbf4; /* (setting) page background — mrbucket.com.sg's own */ --surface: #ffffff; /* cards, tiles, wells. There is NO second surface */ --ink: #44220c; /* (guide) Dark Chocolate 13.8:1 */ --muted: #70543e; /* (guide) Brown Grey 6.7:1 */ --line: #dbd3c8; /* (guide) Light Grey — DECORATIVE dividers only 1.4:1 */ --line-strong: #867e6e; /* (guide) Dark Grey — control borders (3:1 needed) 3.9:1 */ /* ---- Brand — the guide's two primary colours ----------------------------- */ --accent: #8a153c; /* (guide) Deep Red 9.0:1 */ --accent-ink: #ffffff; /* white on Deep Red 9.3:1 */ --gold: #ff9500; /* (guide) Yellow Orange — a FILL, never text: 2.2:1 on white */ --gold-ink: #44220c; /* Dark Chocolate on Yellow Orange 6.5:1 */ /* ---- The guide's secondary palette (p. 13) --------------------------------- A campaign layer only, never core chrome. Pick from these; invent nothing beside them. */ --brand-light-pink: #e9a8e7; --brand-dark-pink: #ee75ce; --brand-light-yellow: #ecd38d; --brand-warm-yellow: #eaae00; --brand-lime-green: #d0e59a; --brand-warm-green: #676f12; --brand-cool-green: #108643; --brand-dark-green: #0c5128; --brand-light-blue: #aacaf9; --brand-bright-blue: #006cb7; --brand-sea-blue: #08586b; --brand-dark-blue: #003957; --brand-light-grey: #dbd3c8; --brand-dark-grey: #867e6e; --brand-brown-grey: #70543e; --brand-black: #2d2b29; --brand-orange: #ff661a; --brand-light-brown: #ae5f23; --brand-milk-chocolate: #6e2c1f; --brand-dark-chocolate: #44220c; /* ---- States ---------------------------------------------------------------- Success and error follow the store's hues, darkened ONLY as far as 4.5:1 against the page, white and their own tint (his ruling). Do not "correct" them back to the store's values: the store ships #2e9e7b at 2.6:1 and #de2a2a at 4.1:1, and both fail. */ --ok: #217259; --ok-bg: #d5e8dc; /* (setting) 4.54:1 on its tint */ --danger: #d52121; --danger-bg: #fdece6; /* (setting) 4.50:1 on its tint */ --warn: #6e2c1f; --warn-bg: #ecd38d; /* (guide) Milk Chocolate on Light Yellow 6.98:1 */ --info: #08586b; --info-bg: #aacaf9; /* (guide) Sea Blue on Light Blue 4.78:1 */ --shadow: 0 1px 2px rgba(68, 34, 12, .05), 0 6px 20px rgba(68, 34, 12, .07); /* ---- Shape (house) ------------------------------------------------------- */ --radius-card: 10px; --radius-control: 8px; --radius-pill: 999px; /* ---- Type ------------------------------------------------------------------ The console is an internal staff tool and keeps system sans (ADR-0019 §3, unchanged by Am. 1). Customer surfaces take the guide's three roles below. Every role is a token, so no component stylesheet ever names a typeface. */ --font-heading: "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Segoe UI", system-ui, -apple-system, sans-serif; --font-sub: "Segoe UI", system-ui, -apple-system, sans-serif; --weight-heading: 650; --weight-body: 400; --weight-bold: 600; --track-heading: -.01em; --track-body: normal; --track-sub: .06em; /* (house) A voucher code must tell 0 from O at the counter, so it is set in a monospaced face. ⚠ The guide names no face for codes; this is an open question to Benjamin, not a ruling. */ --font-code: ui-monospace, Consolas, monospace; } /* The customer surface sets data-surface="customer" on . The guide, p. 11: Headlines Fraunces Thin, sentence case, tracking -40 Sub-headlines Tagada Regular, uppercase, tracking 60 Paragraph Fraunces Light, sentence case, tracking 20 Tracking is in thousandths of an em, so -40 is -0.04em. */ :root[data-surface="customer"] { --font-heading: "Fraunces", Georgia, serif; --font-body: "Fraunces", Georgia, serif; --font-sub: "Tagada", Georgia, serif; --weight-heading: 100; /* Fraunces Thin is too faint to read below 24 px (1.5rem at the 16 px root). His ruling 2026-09-15, after section headings measured 20 px in Chrome — ADR-0019 Am. 1 §Open. */ --size-headline-min: 1.5rem; --weight-body: 300; --track-heading: -0.04em; --track-body: 0.02em; --track-sub: 0.06em; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: var(--weight-body); font-size: 15px; line-height: 1.55; letter-spacing: var(--track-body); margin: 0; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--track-heading); line-height: 1.25; } /* The guide's sub-headline role. Uppercase is part of the role, so it lives here, not per screen. */ .sub-headline { font-family: var(--font-sub); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-sub); } /* Every figure is tabular. A column of numbers that does not line up is a defect. */ .num, td.n, th.n, .stat .v { font-variant-numeric: tabular-nums; white-space: nowrap; }