/*! * Factory Design Tokens — the shared craft layer (design-taste skill, P3/P8/P11). * ---------------------------------------------------------------------------- * PURPOSE. One place that defines the spacing scale, the modular type scale, the * semantic verdict-color language, and the button/card/link primitives — so every * NEW (or modernized) page inherits a handcrafted-by-default system instead of * re-deriving ad-hoc px values per page (the drift the skill exists to kill). * * SAFETY CONTRACT — this file is ADDITIVE and OPT-IN. It must never restyle a page * that merely links it: * 1. It defines ONLY `:root` custom properties and `.fxt-*` / `.fx-tokens` utility * classes. It sets ZERO styles on bare element selectors (body, h1, a, input…), * so linking it changes nothing until markup opts in by using a class. * 2. Every custom property is namespaced `--fx-*`, so it cannot collide with a * page's own tokens (--ink, --mut, --cream, --forest, --teal, …). Existing * per-page CSS stays fully authoritative. * 3. The only class prefix is `.fxt-` (factory token) + the scoping hook * `.fx-tokens`; neither is used by any shipped page (verified), and the * tracker's hooks are `data-fx-*` ATTRIBUTES, not classes — no overlap. * * HOW PAGES OPT IN. Add in : * Then reference tokens (var(--fx-space-md)) and/or utility classes (class="fxt-btn"). * * BUILD. scripts/build.mjs copies shared/* assets into dist/ at site root; this file * should be copied the same way the tracker/DIL are (see report note) so the link * resolves at /design-tokens.css. Fail-open: if it 404s, pages keep their own CSS. */ :root{ /* ---- SPACING — 8pt grid / strict ÷4 (4,8,12,16,24,32,48,64). Skill P3. ---- Internal padding should be <= the space that SEPARATES groups, so groups read as distinct. Use these for margin/padding/gap only — never for type sizes. */ --fx-space-3xs: 4px; --fx-space-2xs: 8px; --fx-space-xs: 12px; --fx-space-sm: 16px; --fx-space-md: 24px; --fx-space-lg: 32px; --fx-space-xl: 48px; --fx-space-2xl: 64px; /* ---- TYPE — modular scale, ratio 1.2 (minor third), base 1rem. Skill P3/P4. ---- SIX working steps + one display step. Type follows THIS scale (a ratio), NOT the 8px grid. Anchor in rem so a page's root size governs. Pair with line-heights below; body line-height >= 1.4, measure 45–75ch. */ --fx-scale-ratio: 1.2; --fx-text-xs: 0.694rem; /* ~11.1px — fine print, legal */ --fx-text-sm: 0.833rem; /* ~13.3px — captions, hints */ --fx-text-base: 1rem; /* 16px — body default */ --fx-text-lg: 1.2rem; /* ~19.2px — lead / large body */ --fx-text-xl: 1.44rem; /* ~23px — sub-heads */ --fx-text-2xl: 1.728rem; /* ~27.6px — section headings */ --fx-text-3xl: 2.074rem; /* ~33.2px — display / page H1 (or clamp on top) */ --fx-leading-tight: 1.15; /* large display */ --fx-leading-snug: 1.3; /* headings */ --fx-leading-body: 1.55; /* body — >= 1.4 per P4 */ --fx-measure: 66ch; /* default reading measure (45–75ch) */ --fx-tracking-display: -0.012em; /* tighten large display */ --fx-tracking-label: 0.10em; /* open small uppercase labels */ /* ---- VERDICT COLOR LANGUAGE — semantic, one meaning per hue. Skill P11. ---- good = in range / yes · watch = check this / caution · high = well above / stop · low = below band / may be incomplete. `-bright` = on dark surfaces; base = on light surfaces (AA-friendly ink). `-surface` = a faint tint for fills/borders. Use these so a gauge, a badge, and prose can never disagree on color meaning. */ --fx-good: #2E7D57; --fx-good-bright: #5BBF8A; --fx-good-surface: rgba(46,125,87,.12); --fx-watch: #BD831C; --fx-watch-bright: #E0A24A; --fx-watch-surface: rgba(189,131,28,.14); --fx-high: #BB4A2B; --fx-high-bright: #D2694C; --fx-high-surface: rgba(187,74,43,.14); --fx-low: #2F6F8F; --fx-low-bright: #6AA6E0; --fx-low-surface: rgba(47,111,143,.14); /* ---- RADIUS & ELEVATION — radius varies by role (not 16px-everywhere, A9). Shadow signals elevation only, never decoration (P11). ---- */ --fx-radius-sm: 4px; /* inputs, chips, small cards */ --fx-radius-md: 10px; /* cards, panels */ --fx-radius-lg: 14px; /* feature / result surfaces */ --fx-radius-pill: 999px; --fx-elevation-1: 0 1px 2px rgba(16,23,32,.06); --fx-elevation-2: 0 4px 16px rgba(16,23,32,.10); /* ---- FOCUS — visible, AA. Pages may recolor via --fx-accent. ---- */ --fx-accent: var(--fx-good); --fx-focus-ring: 0 0 0 3px rgba(46,125,87,.30); } /* ===================================================================== OPT-IN UTILITIES. Nothing below applies unless markup uses the class. Scope hook `.fx-tokens` lets a page enable a few base reading defaults on a container without touching global elements. ===================================================================== */ /* Reading container: caps measure + sets a body-safe line-height. Opt-in. */ .fx-tokens{ line-height: var(--fx-leading-body); } .fx-tokens .fxt-measure{ max-width: var(--fx-measure); } /* ---- Type utilities ---- */ .fxt-text-xs{ font-size: var(--fx-text-xs); } .fxt-text-sm{ font-size: var(--fx-text-sm); } .fxt-text-base{ font-size: var(--fx-text-base); } .fxt-text-lg{ font-size: var(--fx-text-lg); } .fxt-text-xl{ font-size: var(--fx-text-xl); } .fxt-text-2xl{ font-size: var(--fx-text-2xl); } .fxt-text-3xl{ font-size: var(--fx-text-3xl); } .fxt-label{ /* small uppercase label — positive tracking (P4) */ font-size: var(--fx-text-sm); letter-spacing: var(--fx-tracking-label); text-transform: uppercase; font-weight: 700; } .fxt-measure{ max-width: var(--fx-measure); } /* ---- Button system (one shape, two weights). Opt-in via .fxt-btn. ---- */ .fxt-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-space-2xs); font: inherit; font-weight: 700; line-height: 1; padding: var(--fx-space-xs) var(--fx-space-md); min-height: 44px; /* tap target (P12 / usability gate) */ border-radius: var(--fx-radius-md); border: 1px solid transparent; background: var(--fx-accent); color: #fff; text-decoration: none; cursor: pointer; transition: filter .15s ease, background .15s ease, opacity .15s ease; } .fxt-btn:hover{ filter: brightness(1.06); } .fxt-btn--ghost{ background: transparent; color: var(--fx-accent); border-color: currentColor; } .fxt-btn--ghost:hover{ filter: none; background: var(--fx-good-surface); } .fxt-btn:focus-visible{ outline: none; box-shadow: var(--fx-focus-ring); } /* ---- Card surface ---- */ .fxt-card{ background: #fff; border: 1px solid rgba(16,23,32,.12); border-radius: var(--fx-radius-md); padding: var(--fx-space-md); } .fxt-card--feature{ border-radius: var(--fx-radius-lg); box-shadow: var(--fx-elevation-1); } /* ---- Link treatment ---- */ .fxt-link{ color: var(--fx-accent); text-decoration: none; border-bottom: 1px solid currentColor; } .fxt-link:hover{ filter: brightness(1.1); } .fxt-link:focus-visible{ outline: none; box-shadow: var(--fx-focus-ring); border-radius: 2px; } /* ---- Verdict badge / surface utilities (semantic color, P11) ---- */ .fxt-verdict{ border: 1px solid currentColor; border-radius: var(--fx-radius-md); padding: var(--fx-space-sm) var(--fx-space-md); } .fxt-verdict--good{ color: var(--fx-good); background: var(--fx-good-surface); } .fxt-verdict--watch{ color: var(--fx-watch); background: var(--fx-watch-surface); } .fxt-verdict--high{ color: var(--fx-high); background: var(--fx-high-surface); } .fxt-verdict--low{ color: var(--fx-low); background: var(--fx-low-surface); } @media (prefers-reduced-motion: reduce){ .fxt-btn, .fxt-link{ transition: none; } }