/* ============================================================================= WFD Academy — Design Tokens v3.0 (8.0:1 house contrast floor) Black + Gold. Authored 2026-05-21. Implement after the layout rebuild. HOUSE RULE (stricter than WCAG): every TEXT/background pairing in this file meets a contrast ratio of >=8.0:1 (WCAG AA is 4.5, AAA is 7.0). The measured ratio is annotated next to each pairing. Borders and decorative dividers are not text and follow the 3:1 UI rule, not the 8.0 text floor. Consequences of the 8.0 floor (intentional, signed off by Daniel 2026-05-21): - Gold-toned TEXT on light is a dark bronze (#5A430F, 8.59:1), not the lighter gold-deep. Gold-deep #6F5418 is now borders/dividers/decoration only. - Muted text deepened to #4F4639 (8.51:1) — closer to body, less "muted". - Success #114E2A and Danger #732C00 deepened to clear 8.0 on their tints. Other locked changes: - Numerals/stat counters/prices use Libre Franklin (--font-numeral). - Primary (gold) button text is black (#0A0A0A, 8.48:1). - Inset/callout headings are near-black stone (--callout-heading). - Badge is one surface-adaptive treatment (see --badge-*). ============================================================================= */ :root { /* ---- Core palette (raw; do not use directly in components) ---- */ --wfd-black: #0A0A0A; /* canonical near-black surface */ --wfd-stone-900: #2A251E; /* body ink on light (13.96:1 on cream) */ --wfd-stone-700: #443A2C; /* muted ink on light (8.51:1 on cream) */ --wfd-stone-400: #8C8170; /* functional border on light (3.51:1) */ --wfd-stone-300: #C8C0AE; /* decorative hairline only (1.66:1) */ --wfd-stone-100: #EFEAE0; /* inset block background */ --wfd-cream: #F8F5EE; /* page background */ --wfd-white: #FFFFFF; /* raised/card background */ --wfd-gold: #C5A572; /* fills, badges, borders; TEXT only on dark */ --wfd-gold-deep: #6F5418; /* decorative accent: borders, dividers, underlines */ --wfd-bronze: #4D370A; /* gold-toned TEXT on light (8.59 cream / 9.36 white) */ --wfd-bronze-deep: #52400F; /* gold button hover fill (cream text 9.19:1) */ --wfd-gold-tint: #F4EAD1; /* callout background */ --wfd-success: #114E2A; /* pass/correct (8.54:1 on success-tint) */ --wfd-success-tint: #E8F2EB; --wfd-danger: #732C00; /* error/wrong (8.80:1 on danger-tint) */ --wfd-danger-tint: #FBEEDD; /* ---- Semantic surfaces ---- */ --surface-page: var(--wfd-cream); --surface-raised: var(--wfd-white); --surface-inverse: var(--wfd-black); --surface-callout: var(--wfd-gold-tint); --surface-inset: var(--wfd-stone-100); /* ---- Semantic text roles (all >=8.0:1 on their intended surface) ---- Body/heading glyphs are stone-900, white, or pure black. Gold-toned text is pre-resolved per surface to the only value that clears the 8.0 floor. */ --text-strong: var(--wfd-stone-900); /* 13.96:1 on cream */ --text-default: var(--wfd-stone-900); --text-muted: var(--wfd-stone-700); /* 8.51:1 on cream */ --text-on-dark: var(--wfd-white); /* 19.8:1 on black */ --text-on-dark-muted: rgba(255,255,255,0.78); /* ~12:1 on black */ --accent-on-light: var(--wfd-bronze); /* gold-toned text on light 8.59 */ --accent-on-dark: var(--wfd-gold); /* gold-toned text on dark 8.48 */ --callout-heading: var(--wfd-stone-900); /* inset/callout headings: near-black */ /* ---- Lines & borders (3:1 UI rule, not the 8.0 text floor) ---- */ --border-hairline: var(--wfd-stone-300); /* decorative dividers only */ --border-control: var(--wfd-stone-400); /* inputs, ghost buttons, controls */ --divider-gold: var(--wfd-gold); /* decorative gold rule */ /* ---- Badge (one surface-adaptive treatment) ---- Light surfaces: solid stone fill + white text (15.2:1). Dark surfaces: transparent + gold border + white text (19.8:1 text). */ --badge-fill-on-light: var(--wfd-stone-900); --badge-text-on-light: var(--wfd-white); --badge-fill-on-dark: transparent; --badge-border-on-dark: var(--wfd-gold); --badge-text-on-dark: var(--wfd-white); /* ---- Interactive (buttons) ---- */ --btn-fill: var(--wfd-gold); /* primary fill */ --btn-fill-text: var(--wfd-black); /* black on gold, 8.48:1 */ --btn-fill-hover: var(--wfd-bronze-deep); /* #52400F */ --btn-fill-hover-text: var(--wfd-cream); /* 9.19:1 on hover fill */ --btn-ghost-border: var(--border-control); /* functional 3.5:1 on light */ --btn-ghost-text: var(--wfd-stone-900); --focus-on-light: var(--wfd-bronze); /* focus ring on light surfaces */ --focus-on-dark: var(--wfd-gold); /* focus ring on dark surfaces */ /* ---- Semantic status ---- */ --success: var(--wfd-success); --success-bg: var(--wfd-success-tint); --danger: var(--wfd-danger); --danger-bg: var(--wfd-danger-tint); --highlight-bg: var(--wfd-gold-tint); /* ---- Typography ---- */ --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* UI/body */ --font-serif: "EB Garamond", "Charter", Georgia, "Times New Roman", serif; /* display/headlines */ --font-numeral: "Libre Franklin", "IBM Plex Sans", Arial, sans-serif; /* numerals, stats, prices */ --font-mark: "Cinzel", Georgia, serif; /* WFD wordmark ONLY, nowhere else */ --fs-display: 56px; --lh-display: 1.05; --fs-h1: 40px; --lh-h1: 1.10; --fs-h2: 30px; --lh-h2: 1.15; --fs-h3: 22px; --lh-h3: 1.25; --fs-body: 17px; --lh-body: 1.6; --fs-small: 14px; --lh-small: 1.5; --fs-caption: 13px; --lh-caption: 1.45; --measure: 68ch; /* ---- Layout ---- */ --container: 1180px; --gutter: 32px; --radius: 6px; /* sharp corners; 6px max, never pill */ }