/* ============================================================ SYNCED COPY — DO NOT EDIT IN THIS REPO. Source of truth: FOREplay Golf Brand workstation, foreplay-tokens.css. Change a value there, then re-copy. An edit made here will be silently overwritten. Two deliberate differences from the source file: 1. The Google Fonts @import is removed. This site self-hosts both families; the @font-face rules are in site.css. 2. Nothing else. Synced: 31 August 2026 (kit v03). ============================================================ */ /* ============================================================ FOREplay Golf — design tokens v01 · 25 August 2026 · DRAFT pending Tyrone's approval Source of truth: FOREplay Golf Brand workstation. Every FOREplay artefact reads this file — website, Wednesday recap renderer, social posts, posters, documents. Do not redefine these values anywhere else. If a value is missing, add it here AND to the brand guidelines in the same change, not just where you needed it. Provenance, so nobody re-litigates it later: - Green and ink were read out of the 2020 logo artwork (FOREplay.pdf, Black on White). The artwork is CMYK; the sRGB values below are Illustrator's own colour-managed export, not a naive conversion. - The remaining values were adopted from the live website design system (Cloudflare Pages, live 13 Aug 2026) so the brand and the site are one thing rather than two. - #B8892F, the "FOREplay gold" in the Wednesday Video renderer, was INVENTED on 11 Aug 2026 and is not a brand colour. It is replaced by --fp-amber. Do not reintroduce it. ============================================================ */ /* Offline builds (print collateral, video render) must not depend on the import above. Self-hosted woff2 for both families live in FOREplay Golf Brand Resources/Fonts. OPEN, 31 Aug 2026: the website does NOT yet honour this. All eleven of its HTML files load both families from the Google Fonts CDN, assets/site.css has no @font-face, and the build carries no local font files. Logged in the kit's artefact inventory (v03). */ :root { /* --- Brand core. From the artwork. Do not add to this block. --- */ --fp-green: #6EBE44; /* CMYK 42 0 100 0 · PANTONE 368 (unproofed, ΔE 3.2) */ --fp-ink: #040707; /* the wordmark black, CMYK 75 68 67 90 rich black */ --fp-green-shadow: #042C0D; /* the ball's dark side. Gradients and depth only. */ /* --- Extended palette. From the live site. ------------------ */ --fp-green-deep: #2F6B23; /* PANTONE 364 (unproofed, ΔE 4.3). THE ONLY GREEN THAT MAY CARRY TEXT ON A LIGHT SURFACE — 6.47:1 on white, 5.77:1 on bone. */ --fp-acid: #8FD14F; /* highlight on dark only · PANTONE 367, ΔE 4.5 */ --fp-amber: #F2A63A; /* the single accent · PANTONE 137, ΔE 3.1 */ /* --- Surfaces ----------------------------------------------- */ --fp-black: #06080B; /* the primary surface. This brand lives on dark. */ --fp-black-raised: #0D1116; /* cards and panels on black */ --fp-bone: #F4F2EA; /* the light surface · PANTONE 427, ΔE 5.1 */ --fp-white: #FFFFFF; --fp-grey: #9AA2A4; /* muted text on dark, 7.71:1 on black */ /* The ball gradient, taken from the mark: lit top-left, dark base. */ --fp-green-gradient: linear-gradient(145deg, #8FD14F 0%, #6EBE44 45%, #042C0D 100%); /* --- Semantic aliases. Prefer these in components. ----------- */ --fp-bg: var(--fp-black); --fp-surface: var(--fp-black-raised); --fp-text: var(--fp-bone); --fp-text-muted: var(--fp-grey); --fp-accent: var(--fp-amber); --fp-border: rgba(244,242,234,0.14); /* Light-surface set, for print and documents */ --fp-bg-light: var(--fp-bone); --fp-text-light: var(--fp-ink); --fp-text-light-muted: #5A6560; --fp-link-light: var(--fp-green-deep); --fp-border-light: #DCDACE; /* --- Typography ---------------------------------------------- */ --fp-font: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif; /* The data face. Labels, scoreboards, distances, times, table headers. 25 Aug 2026: replaced IBM Plex Mono, which the kit originally specified. Plex Mono has no self-hosted file and could not be fetched, so it was unavailable to every offline build. Barlow Condensed was already carrying eleven of the video renderer's type roles, is a Google Font, and a condensed face suits leaderboards and long player names better than a monospace. The website was repointed on 25 Aug 2026 (commit 8673e62, on origin/main) and now loads Barlow Condensed. */ --fp-font-data: 'Barlow Condensed', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --fp-w-body: 450; --fp-w-medium: 550; --fp-w-semi: 650; --fp-w-bold: 760; --fp-w-heavy: 800; /* Archivo is variable on the width axis. Display type is condensed. */ --fp-wdth-display: 'wdth' 94; --fp-wdth-headline: 'wdth' 88; --fp-fs-display: clamp(52px, 7.4vw, 116px); --fp-fs-headline: clamp(40px, 6.4vw, 96px); --fp-fs-title: clamp(26px, 2.6vw, 40px); --fp-fs-body: clamp(16px, 1.25vw, 19px); --fp-fs-small: 15px; --fp-fs-label: 11px; --fp-lh-display: 0.84; --fp-lh-headline: 0.86; --fp-lh-title: 0.95; --fp-lh-body: 1.50; --fp-tr-display: -0.055em; --fp-tr-headline: -0.06em; --fp-tr-title: -0.045em; --fp-tr-body: -0.012em; --fp-tr-label: 0.16em; /* labels are condensed, uppercase, tracked out */ --fp-measure: 68ch; /* --- Spacing. 4px base. No values between these steps. -------- */ --fp-1: 4px; --fp-2: 8px; --fp-3: 12px; --fp-4: 16px; --fp-6: 24px; --fp-8: 32px; --fp-12: 48px; --fp-16: 64px; --fp-24: 96px; --fp-gutter: clamp(20px, 4.2vw, 76px); --fp-section: clamp(78px, 11vw, 168px); /* --- Radius --------------------------------------------------- */ --fp-r-none: 0; --fp-r-control: 12px; --fp-r-glass: 14px; --fp-r-card: 16px; /* --- Logo clear space ----------------------------------------- */ /* Minimum clear space on all four sides = the height of the "F". */ --fp-logo-clear: 0.34; /* × logo height */ --fp-logo-min-width: 120px; /* below this the strapline is illegible — use the ball alone */ }