/* ============================================================================ CANTON CATALYST : TOKEN SOURCE OF TRUTH Phase 1 of the site elevation. One file, every page inherits it. This is also the reference for keeping the X card system (render_card.py) in the same world. Rule for this file: it defines values, not components. Every colour, size, space, and duration used on the site should resolve to a token defined here. Zero-regression contract (Phase 1): every value below reproduces the current live site exactly. Where the approved Phase 0 plan tunes a value, the target is noted in a comment as PHASE 3, and applied later with Mac's eyes on the result. Nothing here changes the rendered page on its own. Theming: structured theme-ready. Dark ships now. A future light MODE (distinct from the light SECTIONS the site already alternates) would redefine the semantic tokens under :root[data-theme="light"] only. Not built this round. ============================================================================ */ :root { /* --- PRIMITIVES · dark surface ramp (unchanged from live) ---------------- */ --ink: #0C0F1A; /* page ground PHASE 3 target: #0A0D17 cool */ --ink2: #141828; /* raised surface */ --ink3: #1C2438; /* higher surface */ --ink4: #242E45; /* highest surface / hairline-lit */ /* --- PRIMITIVES · light section ramp (the site alternates light bands) --- */ --paper: #F7F8FA; --paper2: #EEF0F5; --paper3: #E3E6EE; /* --- PRIMITIVES · brand ------------------------------------------------- */ --green: #00D48A; /* house accent: identity + primary CTA only */ --green2: rgba(0,212,138,0.12); /* green wash (chips, active fills) */ --green3: rgba(0,212,138,0.06); /* faint green wash */ /* --- PRIMITIVES · text -------------------------------------------------- */ --td: #E8F0FF; /* text on dark, primary */ --td2: #8A9BC0; /* text on dark, secondary */ --td3: #4A5A7A; /* text on dark, tertiary */ --tl: #1A2035; /* text on light, primary */ --tl2: #4A5570; /* text on light, secondary */ --tl3: #8A95AE; /* text on light, tertiary */ /* --- PRIMITIVES · borders / radii --------------------------------------- */ --bd: rgba(232,240,255,0.07); /* hairline on dark */ --bl: rgba(26,32,53,0.09); /* hairline on light */ --r: 4px; --r2: 8px; --r3: 12px; /* --- LEGACY ACCENTS · slated for removal in PHASE 3 --------------------- */ /* These are the generic dark-SaaS hues on the kill list. Kept now so Phase 1 is zero-regression; the Phase 3 homepage pass replaces token-brand accents with a single neutral treatment. Do not reach for these in new work. */ --blue: #4A7BF7; /* ======================================================================== THE REGISTER · the named evidence-notation instrument (Phase 0 approved) Four tiers. Shape carries the tier (solid / half / outline / dashed); these colours only support it. Values below are the CURRENT tier colours so Phase 1 does not shift the coverage blocks. PHASE 3 targets from the plan are noted for the tuning pass. ======================================================================== */ --register-confirmed: #4FB58C; /* muted green, quieter than the house green */ --register-announced: #E3B341; /* amber */ --register-speculated: #6E7DA0; /* cool slate, reads as "my read" */ --register-open: #5A657E; /* neutral, an open question is not a claim */ /* ======================================================================== TYPE · one modular scale, ratio 1.25 (major third), base 16px. Three faces, each rationed. Fraunces is the craft signature and stays scarce. Self-hosting of these faces lands in Phase 1 wiring; the URLs in each page's are replaced by local @font-face then. ======================================================================== */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Modular scale, ratio ~1.2, base 16. Every fixed CSS font-size resolves to a step here (26 hand-tuned sizes collapsed to 8). Display moments (hero, thesis, about, section headings) keep responsive clamp() below. */ --fs-eyebrow: 0.6875rem; /* 11px : mono eyebrows, micro-labels, captions */ --fs-caption: 0.8125rem; /* 13px : fine print, dense UI */ --fs-body: 1rem; /* 16px : body */ --fs-lead: 1.1875rem; /* 19px : leads, large body */ --fs-title: 1.4375rem; /* 23px : card and row titles */ --fs-h3: 1.75rem; /* 28px : sub-headings */ --fs-h2: 2.0625rem; /* 33px : fixed section headings */ --fs-h1: 2.5rem; /* 40px : large fixed headings */ --lh-tight: 1.1; /* display */ --lh-snug: 1.35; /* headings */ --lh-body: 1.6; /* body */ --lh-loose: 1.75; /* long-form reading */ --measure-long: 66ch; /* research reading column, 60-72ch */ --tracking-label: 0.12em; /* mono eyebrows */ /* ======================================================================== SPACE · 4 / 8 rhythm. One scale, used by every section's own layout. ======================================================================== */ /* Spacing tokens are named by their pixel value and map every homepage padding, margin, and gap to a token with zero layout change (the values are exact, not rounded). The design's hand-tuned rhythm is preserved on purpose; a coarser modular re-spacing would visibly move the approved layout. */ --sp-1: 1px; --sp-2: 2px; --sp-3: 3px; --sp-4: 4px; --sp-5: 5px; --sp-6: 6px; --sp-7: 7px; --sp-8: 8px; --sp-9: 9px; --sp-10: 10px; --sp-11: 11px; --sp-12: 12px; --sp-13: 13px; --sp-14: 14px; --sp-15: 15px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-21: 21px; --sp-22: 22px; --sp-24: 24px; --sp-26: 26px; --sp-28: 28px; --sp-30: 30px; --sp-32: 32px; --sp-34: 34px; --sp-36: 36px; --sp-40: 40px; --sp-48: 48px; --sp-52: 52px; --sp-54: 54px; --sp-56: 56px; --sp-60: 60px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-100: 100px; --container: 1120px; /* current .container max-width, kept */ --gutter: 40px; /* current .container padding, kept */ /* ======================================================================== MOTION · the three sanctioned behaviours only. All gated on prefers-reduced-motion at the component level. ======================================================================== */ --dur-fast: 150ms; /* functional state (nav, hover, form) */ --dur-mid: 250ms; /* accordion, reveal */ --dur-hero: 800ms; /* the single hero entrance, once/load */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-standard: ease; } /* Honest default: if a viewer forces reduced motion, the site respects it. Components still declare their own guards; this is the floor. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-hero: 1ms; } } /* ============================================================================ BRAND TOKEN SYSTEM (quadrant pages + the X card renderer) : reference only ---------------------------------------------------------------------------- The two quadrant pages (quadrant.html, quadrant/issue-01.html) intentionally DO NOT consume this file. They run a separate brand vocabulary shared with scripts/render_card.py in the workspace repo, so the site chart and the X cards read as one house ("worldbuilding-grade consistency"). Documented here so the two systems are no longer an undocumented hazard. --navy #0B1322 page ground (this file's --ink is a DARK ground) --panel #111C30 card surface --grid #1D2A42 gridlines / hairline --ink #E9EDF4 PRIMARY TEXT <-- collides by name with our --ink --muted #7E8CA3 secondary text --accent #2BD67B brand green (this file's house green is #00D48A) --amber #E3B341 same as --register-announced The only real collision is --ink (dark ground here, light text there), which is why linking this file onto the quadrant pages would invert them. Any true merge must rename that token and is out of scope while render_card.py is separately governed (do not edit the renderer from this project). ============================================================================ */