/* ========================================================================== Redesign Site — Design Tokens (v1) source/website-redesign/_tokens/tokens.css Reference: docs/specs/redesign-component-library-v1-spec.md, Revision 3, §5 GOVERNANCE (per spec §5): this file is the ONLY place a colour, type, or spacing value may be defined for the redesign site. Adding or changing a token requires the spec to be revised first (new revision, §5 table updated) — never a same-session ad hoc addition inside a component or page file. Colour tokens are pulled directly from config/terminology.json's locked colour system — not redefined here. Type and spacing scales are new: they did not exist anywhere in the redesign site before this file (confirmed by direct inspection of css/styles.css — font sizes and spacing were literal px values repeated inline, e.g. font-size:11px, font-size:38px). Scale steps below were chosen against that file's real, observed usage (see comments per step) so migration in Step 3 mostly maps existing values onto the nearest token rather than requiring a visual redesign — this is mechanical extraction, not restyling. RESOLVED (3 Aug 2026): the colour-token duplication flagged by the 12-member panel review is closed. tokens.css is now the sole source for --gold, --green, --bg, --gold-dim, and --green-bg — all removed from css/styles.css's :root. tokens.css is linked on all 24 pages as of this same change. ========================================================================== */ :root { /* -------------------------------------------------------------------- COLOUR — locked, from config/terminology.json. Usage restrictions are enforced by convention/review, not by this file — see notes per token. -------------------------------------------------------------------- */ --gold: #C8A96E; /* Vektor content only — never InvestPuppy/founder context */ --gold-dim: #8A6E3E; /* Migrated from styles.css during the duplicate-cleanup (3 Aug 2026) */ --green: #85D155; /* Default InvestPuppy accent — everywhere except verdigris exceptions */ --green-bg: #0E1A0A; /* Migrated from styles.css during the duplicate-cleanup (3 Aug 2026) */ --verdigris: #6BAF82; /* Restricted: logo lockup, ribbon strapline, founder/personal contact only */ --bg: #0A0A0A; /* Vektor background */ /* -------------------------------------------------------------------- TYPOGRAPHY — font families (locked, from spec §5) -------------------------------------------------------------------- */ --font-vektor: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-investpuppy: "Poppins", sans-serif; /* -------------------------------------------------------------------- TYPOGRAPHY — type scale Base: 16px root. Values in rem with px-equivalent noted. Step chosen to sit on or immediately adjacent to the highest-frequency literal values found in css/styles.css (occurrence counts from direct grep, 3 Aug 2026). Steps not currently backed by real usage are included for scale completeness (headline sizes) and marked accordingly. -------------------------------------------------------------------- */ --text-2xs: 0.625rem; /* 10px — 14 occurrences live (micro-copy, labels) */ --text-xs: 0.6875rem; /* 11px — 35 occurrences live (most common — eyebrow/meta text) */ --text-sm: 0.8125rem; /* 13px — 31 occurrences live. 12px (26 occurrences) merges into this step rather than getting its own — panel review found the original two-step 12px/13px split produced a weak token name (--text-sm2) for a 1px distinction not worth preserving. 13px chosen as canonical since it's the more frequent of the two. */ --text-base: 0.875rem; /* 14px — 30 occurrences live (body copy baseline) */ --text-md: 1rem; /* 16px — 15 occurrences live */ --text-lg: 1.125rem; /* 18px — 3 occurrences live */ --text-xl: 1.25rem; /* 20px — 6 occurrences live */ --text-2xl: 1.375rem; /* 22px — 5 occurrences live */ --text-3xl: 1.75rem; /* 28px — 5 occurrences live */ --text-4xl: 2rem; /* 32px — 3 occurrences live */ --text-5xl: 2.25rem; /* 36px — 2 occurrences live */ --text-6xl: 2.625rem; /* 42px — 2 occurrences live */ --text-7xl: 3rem; /* 48px — 1 occurrence live */ --text-8xl: 3.75rem; /* 60px — 2 occurrences live */ --text-9xl: 4rem; /* 64px — 1 occurrence live */ /* Near-neighbour literals absorbed into the nearest step above during Step 3 migration (not exact matches, tracked here so the mapping is explicit rather than silent). Tie-breaking rule where a literal sits exactly between two steps: round up. Every distance below was checked by direct calculation, not eyeballed, after panel review caught two mapping errors in an earlier version of this table (26px was wrongly assigned to 2xl instead of 3xl; 44px to 7xl instead of 6xl): 9px → 2xs (10px, 1px away) 12px → sm (13px, 1px away — see --text-sm note above) 15px → md (16px, tie with base/14px, rounded up) 17px → lg (18px, tie with md/16px, rounded up) 19px → xl (20px, tie with lg/18px, rounded up) 24px → 2xl (22px, 2px away vs. 6px away to 3xl) 26px → 3xl (28px, 2px away vs. 4px away to 2xl) 30px → 4xl (32px, tie with 3xl/28px, rounded up) 34px → 5xl (36px, tie with 4xl/32px, rounded up) 44px → 6xl (42px, 2px away vs. 4px away to 7xl) */ /* -------------------------------------------------------------------- SPACING — 4px-based scale Chosen against real margin/padding literal usage in css/styles.css. Exact matches noted; near-neighbours (6px, 10px, 14px, 18px, 28px, 50px, 56px, 72px, 96px, 100px, 200px) absorb into the nearest step during Step 3 migration, same discipline as the type scale above. -------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px — exact match, 20 occurrences live */ --space-2: 0.5rem; /* 8px — exact match, 16 occurrences live */ --space-3: 0.75rem; /* 12px — exact match, 18 occurrences live */ --space-4: 1rem; /* 16px — exact match, 23 occurrences live */ --space-5: 1.25rem; /* 20px — exact match, 21 occurrences live */ --space-6: 1.5rem; /* 24px — exact match, 15 occurrences live */ --space-8: 2rem; /* 32px — exact match, 11 occurrences live */ --space-10: 2.5rem; /* 40px — exact match, 5 occurrences live */ --space-12: 3rem; /* 48px — exact match, 6 occurrences live */ --space-16: 4rem; /* 64px — exact match, 1 occurrence live */ --space-20: 5rem; /* 80px — exact match, 5 occurrences live */ --space-24: 6rem; /* 96px — near match to observed 96px */ /* -------------------------------------------------------------------- RADIUS — from real border-radius usage in css/styles.css NOT in spec §5's token table. Added on the same reasoning as the type/spacing scale (low incremental cost while this file is already being built) but — unlike type/spacing — this was never put to the founder as an explicit in-scope/defer choice. Flagged by panel review as a scope addition that should be a visible decision, not a silent one. Left in pending confirmation; remove if not wanted. -------------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 3px; /* most common live value — 6 occurrences */ --radius-lg: 4px; --radius-xl: 6px; --radius-full: 50%; /* circular elements (FAB, avatars) */ }