/* ========================================================================== SCL SHARED DESIGN TOKENS Single source of truth for every SCL V2 module's visual language. SOURCE OF TRUTH: docs/design/mockups/direction-9/{hub,contracts}.html ("Clubhouse x Statcast" — commissioner-approved direction). Every value below is copied verbatim from those two files' :root blocks and inline styles. Do not "improve" a hue here — if a value looks off, go re-check direction-9, don't guess. ONE EXCEPTION: the two devices borrowed from direction-6/history.html (home-plate year badge, solid green table-header band) are geometry-only borrows, re-expressed in direction-9's own green/amber palette. No direction-6 hex values appear anywhere in this file. See scl-components.css for where those two devices land. NAMING: every custom property is prefixed --scl- . This is deliberate, not decorative — contracts-db already has its own older `--scl-*` token lineage (see docs/design/audit-2026-07/AUDIT_SUMMARY.md), and the other three modules currently define bare `--bg`/`--card`/`--primary` etc. Prefixing avoids a same-name collision with those old tokens during the step-7 migration, when the old module CSS and this shared file will briefly coexist in the same page. CHROME vs DATA — the one rule that matters most in this system: Green/amber are BRAND CHROME (nav, links, cards, status, live/comm badges). Blue -> gray -> red (the --scl-data-* family) is DATA TEMPERATURE ONLY — it exists solely to encode "cold to hot" on percentile bars and heat chips. It must never leak into nav, links, or brand accents. Red also has a SEPARATE semantic meaning (negative/urgent, e.g. a negative delta) with its OWN distinct hex (--scl-negative, #C6262E) that is deliberately different from --scl-data-red (#D22D49) — so the two reds are never visually confusable, keeping the chrome/data split real even though both are "red." See DESIGN_SYSTEM.md for the full rule. ========================================================================== */ :root{ /* ---- Color: page / card / ink / hairline (direction-9 base surfaces) --- */ --scl-page: #FAF9F5; /* body background, both files */ --scl-card: #FFFFFF; /* card background */ --scl-white: #FFFFFF; /* on-chrome text/icon color (nav, badges). Same hex as --scl-card but a distinct role — never swap one for the other; a future palette tweak could split them. */ --scl-ink: #1A2018; /* primary text */ --scl-ink-soft: #4B5449; /* secondary/muted text */ --scl-hairline: #E5E2D9; /* card borders, dividers */ --scl-hairline-soft: #F3F1E9; /* row hover / muted-chip fill, row bottom-border */ /* ---- Color: scoreboard green family (BRAND CHROME) --------------------- Used for nav, links, section-head labels, "LIVE"/"COMM" chips, active tool-card border/CTA. Never used to encode data. */ --scl-green: #0B3D2E; /* primary chrome fill/text — nav bg, links, chip-comm bg */ --scl-green-deep: #082C21; /* hover/active variant of --scl-green; also the darker chrome band behind the scoreboard/stats strip */ --scl-green-mid: #0E5A41; /* the scoreboard/stats plate track itself (one step lighter than green-deep, one step darker than green) */ --scl-green-soft: #E3EEE8; /* text-safe tint — bg for green-on-tint text (e.g. a status pill), pairs with --scl-green as the text color */ /* ---- Color: amber family (BRAND CHROME accent) ------------------------- The scoreboard-plate / season-badge device color. Graphical amber is rarely used as text (contrast); use --scl-amber-ink for amber text. */ --scl-amber: #F4C430; /* graphical amber — logo-mark bg, active-plate glow, stat-value figures, season-badge dot */ --scl-amber-ink: #7A5E00; /* text-safe dark amber — text on --scl-amber-soft */ --scl-amber-soft: #FBF0C7; /* tint bg for amber badges (FA badge, extra-pick chip) */ /* ---- Color: data-temperature pair (DATA ENCODING ONLY) ----------------- The Savant-style percentile-bar / heat-chip gradient: blue (cold) -> gray (mid) -> red (hot). NEVER used for chrome, nav, links, or brand accents — see header note. No text-safe blue variant exists because direction-9 never renders blue as text, only as a gradient stop. */ --scl-data-blue: #5B7FBD; /* cold end of the gradient (decorative only) */ --scl-data-gray: #8C93A6; /* gradient midpoint */ --scl-data-red: #D22D49; /* hot end of the gradient; also heat-2 (highest tier) chip fill (white text on top, see --scl-white) */ --scl-data-red-soft: #FBE4E9; /* heat-1 (mid tier) chip fill */ --scl-data-red-deep: #A11F38; /* text-safe red — text color on --scl-data-red-soft */ /* ---- Color: semantic green/red (deltas, negative/urgent status) -------- Distinct from the data-temperature pair above by design (see header note) so a "this is bad" signal never gets mistaken for a "this is a hot percentile" signal. Positive has no separate hex: direction-9 reuses brand --scl-green for "good" (chip-live, status-pill st-keeper both key off --scl-green / --scl-green-soft) rather than minting a second green — do the same in consuming modules rather than inventing one. */ --scl-negative: #C6262E; /* hub.html's declared --red — negative/urgent semantic. Not rendered in either direction-9 file's markup, but declared in hub.html's :root as the reserved negative token; kept intentionally distinct from --scl-data-red (#D22D49). */ --scl-negative-soft: #FDEBEA; /* hub.html's declared --red-soft; tint bg for the above */ /* ---- Color: overlays (white/black alpha layers used ON the green chrome, e.g. season-badge fill/border, scoreboard bevels, idle vs. active plate text). Every distinct alpha step direction-9 actually uses. */ --scl-overlay-white-05: rgba(255,255,255,.05); /* plate-divider inset highlight */ --scl-overlay-white-06: rgba(255,255,255,.06); /* track top bevel */ --scl-overlay-white-10: rgba(255,255,255,.10); /* season-badge fill */ --scl-overlay-white-18: rgba(255,255,255,.18); /* season-badge / admin-gear border */ --scl-overlay-white-25: rgba(255,255,255,.25); /* scoreboard bulb, idle state */ --scl-overlay-white-45: rgba(255,255,255,.45); /* scoreboard label, idle state */ --scl-overlay-white-50: rgba(255,255,255,.50); /* scoreboard bulb, past state */ --scl-overlay-white-55: rgba(255,255,255,.55); /* stat-label text on chrome (contracts strip) */ --scl-overlay-white-60: rgba(255,255,255,.60); /* brand-sub text on chrome (contracts nav) */ --scl-overlay-white-65: rgba(255,255,255,.65); /* breadcrumb text on chrome */ --scl-overlay-white-70: rgba(255,255,255,.70); /* scoreboard label, past state */ --scl-overlay-white-85: rgba(255,255,255,.85); /* admin-gear icon */ --scl-overlay-black-25: rgba(0,0,0,.25); /* track bottom bevel */ --scl-overlay-black-30: rgba(0,0,0,.30); /* plate divider border */ /* ---- Color: amber glows + small accent rings --------------------------- Primitives that back the composed --scl-glow-*/--scl-ring-* shadow tokens below (Shadows group). Kept separate so the shadow group reads as "what it does," not "what rgba it is." */ --scl-glow-amber-06: rgba(244,196,48,.06); /* stat-plate resting tint bg */ --scl-glow-amber-08: rgba(244,196,48,.08); /* active scoreboard-plate tint bg */ --scl-glow-amber-35: rgba(244,196,48,.35); /* text-shadow glow (active label / stat value) */ --scl-glow-amber-70: rgba(244,196,48,.70); /* active scoreboard bulb glow */ --scl-ring-ink-35: rgba(26,32,24,.35); /* percentile-bar marker-dot outer ring */ --scl-ring-amber-ink-25: rgba(122,94,0,.25); /* pk-chip-extra inset ring */ /* ============================ TYPOGRAPHY =============================== */ /* ---- Font stacks -------------------------------------------------------- Oswald = display/headings/eyebrows. Inter = body/UI. JetBrains Mono = every tabular numeral, chip, and label that needs fixed-width digits. */ --scl-font-display: 'Oswald', -apple-system, sans-serif; --scl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --scl-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- Weights (Google Fonts import: Oswald 500/600/700, Inter 400/500/600/700, JetBrains Mono 400/500/600/700) --------------------- */ --scl-fw-regular: 400; --scl-fw-medium: 500; --scl-fw-semibold: 600; --scl-fw-bold: 700; /* ---- Type scale — every distinct font-size direction-9 actually uses, named by their px value so the token is self-documenting. Roughly: 10.5-12.5 = chip/label/micro-mono text; 13-17 = body/card copy; 19-20 = card/section headings; 26-42 = stat readouts and the hero headline. */ --scl-fs-105: 10.5px; --scl-fs-11: 11px; --scl-fs-115: 11.5px; --scl-fs-12: 12px; --scl-fs-125: 12.5px; --scl-fs-13: 13px; --scl-fs-135: 13.5px; --scl-fs-14: 14px; --scl-fs-15: 15px; /* body default */ --scl-fs-16: 16px; --scl-fs-17: 17px; --scl-fs-19: 19px; --scl-fs-20: 20px; --scl-fs-26: 26px; --scl-fs-32: 32px; --scl-fs-42: 42px; /* hero headline, desktop */ /* ---- Letterspacing tokens (caps/eyebrow/label styles) — named by their em value x100 so e.g. --scl-ls-05 == .05em. */ --scl-ls-01: .01em; --scl-ls-02: .02em; --scl-ls-03: .03em; --scl-ls-04: .04em; --scl-ls-05: .05em; --scl-ls-09: .09em; --scl-ls-10: .1em; /* ============================== LAYOUT ================================= */ /* ---- Spacing scale (8pt-derived, exactly as declared in both files) --- */ --scl-s1: 4px; --scl-s2: 8px; --scl-s3: 12px; --scl-s4: 16px; --scl-s5: 24px; --scl-s6: 32px; --scl-s7: 48px; --scl-s8: 64px; /* ---- Page content max-width. hub.html uses 1200px, contracts.html uses 1240px for the same role (nav-inner/sb-outer/wrap/footer-inner). Picked contracts.html's wider value as canonical — see DESIGN_SYSTEM.md / packet report for the "which won" note. */ --scl-content-max: 1240px; /* ---- Radii --------------------------------------------------------- */ --scl-radius-track: 2px; /* percentile-bar track / legend track */ --scl-radius-xs: 4px; /* focus-ring corner rounding */ --scl-radius-pk: 5px; /* pick-inventory number chip */ --scl-radius-sm: 6px; /* scoreboard/stats track, badge, table-wrap, search-shortcut */ --scl-radius-md: 8px; /* logo-mark, icon-wrap, admin-gear, team-row, chip-num */ --scl-radius-lg: 10px; /* card (direction-9's --radius) */ --scl-radius-pill: 999px; /* chip, season-badge, status-pill */ --scl-radius-round: 50%; /* dots, pips, circular marks */ /* ---- Shadows / glows / bevels — composed from the overlay + glow primitives above. Direction-9 uses NO elevation shadow on cards (borders only); these are all chrome bevels or small accent glows. --- */ --scl-shadow-track-bevel: inset 0 1px 0 var(--scl-overlay-white-06), inset 0 -1px 0 var(--scl-overlay-black-25); --scl-shadow-plate-divider: inset 1px 0 0 var(--scl-overlay-white-05); --scl-glow-text-amber: 0 0 12px var(--scl-glow-amber-35); --scl-glow-bulb-amber: 0 0 6px var(--scl-glow-amber-70); --scl-ring-dot: 0 0 0 1px var(--scl-ring-ink-35); --scl-ring-chip-extra: inset 0 0 0 1px var(--scl-ring-amber-ink-25); /* ---- Borders --------------------------------------------------------- */ --scl-border-hairline: 1px solid var(--scl-hairline); --scl-border-hairline-soft: 1px solid var(--scl-hairline-soft); --scl-border-chrome: 1px solid var(--scl-overlay-white-18); /* season-badge/admin-gear on green */ --scl-border-nav-bottom: 1px solid var(--scl-green-deep); --scl-border-plate-divider: 1px solid var(--scl-overlay-black-30); /* ---- Z-index tiers. --scl-z-nav is the one literal value direction-9 declares (sticky nav, z-index:20). --scl-z-sticky is a conservative extrapolation for in-page sticky elements (e.g. a table thead) that sit below the nav but above normal content — direction-9's own sticky table header doesn't set an explicit z-index, so treat this tier as a system convention, not a spot-checked value. */ --scl-z-sticky: 10; --scl-z-nav: 20; /* ---- Focus ring (direction-9's :focus-visible rule) ------------------- */ --scl-focus-color: var(--scl-green); /* default */ --scl-focus-color-chrome: var(--scl-amber); /* nav / scoreboard override */ --scl-focus-width: 2px; --scl-focus-offset: 2px; --scl-focus-radius: 4px; /* ---- Transitions ------------------------------------------------------- */ --scl-transition-fast: .15s ease; /* border-color / background / box-shadow / transform */ }