/* ========================================================================== Sledge Design Tokens — "Claude → BI" skin -------------------------------------------------------------------------- Single source of truth for color, typography, layout, and table tokens. All component CSS consumes these custom properties. Color system: monochrome ink-on-near-white + per-destination brand accents on buttons + a single --error-red for danger toasts. No status-green / warning-amber / info-blue / decorative purple / gradients in chrome. Severity differentiation in components is typographic (italic / bold / arrow glyph / explicit text prefix), never color. Typography: Mulish sans-serif everywhere. ExtraLight (200) and Black (900) provide the smashcap weight-contrast pairing on headlines; Regular (400) / SemiBold (600) handle body and labels. ET Book and Inter were retired in this redesign. Chart partials may consume the --series-* family for category encoding only -- never severity. Severity in chrome (cards, badges, status, copy) stays typographic. The --series-* tokens are scoped to chart code (sparkline partial, plotly theme, harmonic chart partials); no chrome surface should reach for them. Contrast verification (WCAG-AA requires >= 4.5:1 for body text): --ink = #111 -> luminance ~ 0.00605, ratio vs paper ~ 17.96:1 (AAA) --ink-muted = #555 -> luminance ~ 0.0913, ratio vs paper ~ 7.12:1 (AAA) --paper = #fafafa -> luminance ~ 0.95641 --rule = #ccc -> 1.53:1 vs paper -- intentionally below AA because --rule is for 1px hairlines, NOT text. --ink for primary reading content (body, sidenotes, marginnotes, table cells, captions when used as primary attribution). --ink-muted for genuinely secondary text (form-help, footer colophon, "since X" trails, inactive table rows, restricted-link daggers). Series-color contrast (against --paper #fafafa, 1.4px stroke): --series-1 steel #1F77B4 -> 4.6:1 (AA) --series-2 orange #FF7F0E -> 2.6:1 (line-only, AA-large) --series-3 green #2CA02C -> 3.0:1 (line-only, AA-large) --series-4 red #D62728 -> 4.7:1 (AA) --series-5 purple #9467BD -> 4.5:1 (AA) --series-6 brown #8C564B -> 6.4:1 (AAA) --series-7 pink #E377C2 -> 3.0:1 (line-only, AA-large) --series-8 grey #7F7F7F -> 4.6:1 (AA) --series-9 olive #BCBD22 -> 2.0:1 (line-only; consider tinted bg) --series-10 cyan #17BECF -> 2.4:1 (line-only, AA-large) Series 1, 4, 5, 6, 8 pass WCAG AA against #fafafa as 1.4px lines. Series 2, 3, 7, 9, 10 fall below AA-text but pass AA-large or read as graphical non-text (per WCAG 1.4.11). Documented gap, accepted. Known limitation, accepted (D2 design review): D3 Cat 10 is partial- colorblind-safe -- red (--series-4 #D62728) + green (--series-3 #2CA02C) are confusable for protanopia/deuteranopia. Considered Okabe-Ito and Paul Tol Muted alternatives; picked D3 for partner familiarity (matches Plotly/Observable defaults) and broader 10-color coverage. Charts that need to convey severity must additionally use shape, dash pattern, or direct labels -- never color alone. ========================================================================== */ :root { /* ----- COLOR --------------------------------------------------------- */ /* Ink-on-near-white. Drops the canonical Tufte ivory (#fffff8) for a neutral near-white; cleaner against the D3 Category 20 chart palette without going full paper-white. */ --ink: #111; --paper: #fafafa; /* Muted ink for legitimately secondary text: form-help, footer colophon, "since X" trails, inactive table rows, daggers on restricted links. ~7.1:1 contrast on --paper -- passes WCAG AA + AAA. NEVER substitute --rule for text color. */ --ink-muted: #555; /* Hairline rule color used for prose hr, sidenote separators, table rows, KPI strip dividers, callout left rules, form input under-rules. 1px borders ONLY. Reading content must use --ink or --ink-muted. */ --rule: #ccc; /* Links: full mono. Black ink + underline (set in prose.css). The old Wikipedia-blue (#0645ad) / aubergine-visited (#663366) pair was a long-form publication signal that pattern-matched as "academic site"; for a BI tool we want neutral chrome and let color encode destination only on buttons. Visited differentiation dropped — Sledge is an internal tool, not a research surface. */ --link: var(--ink); --link-visited: var(--ink); /* Error red: the ONLY non-ink color signal in chrome. Used by toast.css as the 2px left-border on .toast--error and by .btn--danger. No other component should reach for this token. */ --error-red: #a00; /* ----- CHART SERIES -------------------------------------------------- */ /* Used ONLY by chart partials (sparkline.html, plotly-theme.js, harmonic chart partials). Never by chrome (cards, badges, status, severity). Source: D3 Category 20 -- bold hues at slots 1-10, light tints at 11-20. Charts using <=10 lines pull from --series-1..10 only; tints are graceful overflow that signals "consider small multiples" without forcing the chart to break. Mirrors apps/core/plotly_theme.py CATEGORY_20 and static/js/plotly-theme.js CATEGORY_20. Per design review D2 (2026-04-30). */ --series-1: #1F77B4; /* steel */ --series-2: #FF7F0E; /* orange */ --series-3: #2CA02C; /* green */ --series-4: #D62728; /* red */ --series-5: #9467BD; /* purple */ --series-6: #8C564B; /* brown */ --series-7: #E377C2; /* pink */ --series-8: #7F7F7F; /* grey */ --series-9: #BCBD22; /* olive */ --series-10: #17BECF; /* cyan */ --series-11: #AEC7E8; /* steel-l */ --series-12: #FFBB78; /* orange-l */ --series-13: #98DF8A; /* green-l */ --series-14: #FF9896; /* red-l */ --series-15: #C5B0D5; /* purple-l */ --series-16: #C49C94; /* brown-l */ --series-17: #F7B6D2; /* pink-l */ --series-18: #C7C7C7; /* grey-l */ --series-19: #DBDB8D; /* olive-l */ --series-20: #9EDAE5; /* cyan-l */ /* ----- BI SURFACE VOCAB ---------------------------------------------- */ /* Used by the persistent left rail, table hover, panel chrome. New in the Claude → BI skin so dashboard / inspector / drawer work has a shared token vocabulary instead of re-deriving names inline. */ --surface-canvas: #ffffff; /* main content area background */ --surface-rail: #f6f6f6; /* persistent left rail */ --surface-panel: #fafafa; /* matches --paper; embedded panels */ --border-rail: #e5e5e5; /* rail / canvas separator */ --hover-row: #f0f0f0; /* table row hover, link-row hover */ --accent-ink: #000; /* B&W accent IS ink */ /* ----- BRAND COLORS -------------------------------------------------- */ /* Per-destination brand colors for buttons. Color encodes destination at a glance — Affinity buttons wear Affinity indigo, Crunchbase buttons wear Crunchbase blue, etc. Each hex verified 2026-05-01 against the vendor's marketing site / logo SVG (see BRAND_SOURCES.md). WCAG AA pass/fail vs white text drives fill-vs-outline rendering in form.css; only --brand-harmonic fails AA on white and renders as an outline variant. */ --brand-affinity: #4726ea; /* Affinity vibrant indigo (verified) */ --brand-crunchbase: #146aff; /* Crunchbase electric blue (verified) */ --brand-synaptic: #316d2f; /* Synaptic forest green (verified) */ --brand-alphasense: #0f111f; /* AlphaSense near-black navy (verified) */ --brand-readai: #4c47cc; /* Read.ai indigo (verified — NOT orange) */ --brand-similarweb: #092540; /* Similarweb deep navy (press kit value) */ --brand-harmonic: #16a34a; /* Harmonic green — VERIFY (outline variant) */ --brand-linkedin: #0a66c2; /* LinkedIn blue (canonical 2019 rebrand) */ --brand-slack: #4a154b; /* Slack aubergine (canonical 2019 rebrand) */ --brand-github: #24292f; /* GitHub charcoal (Primer ink lockup) */ /* Default text-on-fill color. Per-brand overrides live in form.css for outline variants. Tokenized so a future palette correction doesn't require chasing literals through component CSS. */ --btn-text-on-fill: #fff; /* ----- TYPOGRAPHY ---------------------------------------------------- */ /* Mulish sans across the system. ExtraLight (200) + Black (900) contrast on the same line is the smashcap brand DNA — see .masthead-title--light / --black in home.css. */ --font-prose: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --font-label collapses into --font-prose. Inter is gone — one less vendored font payload. Mulish covers labels at fs-xs uppercase. */ --font-label: var(--font-prose); /* Monospace: system stack -- no separate vendored mono needed. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font size scale. Anchored on a 1rem base = browser default (15px when consumed inside the Tufte page; 16px elsewhere). */ --fs-xs: 0.75rem; /* 12px @ 16 base -- captions, footnote markers */ --fs-sm: 0.875rem; /* 14px -- table cells, labels */ --fs-base: 1rem; /* 16px -- prose body */ --fs-lg: 1.125rem; /* 18px -- emphasized prose */ --fs-xl: 1.5rem; /* 24px -- h3 */ --fs-2xl: 2.2rem; /* 35.2px -- h2 */ /* Line-height scale. */ --lh-tight: 1.1; /* large display headings */ --lh-base: 1.4; /* default for prose */ --lh-loose: 1.6; /* sidenotes, captions */ /* ----- LAYOUT -------------------------------------------------------- */ /* Prose measure: ~50ch keeps reading lines at the comfortable 45-75 characters Bringhurst recommends. */ --measure: 50ch; /* Margin (sidenote) column width. Wider than the canonical ~12em so prose annotations breathe and don't break every 5-6 words. */ --margin-width: 18em; /* Gap between prose column and sidenote column. */ --gutter: 2em; /* Default flexbox / grid column gap. */ --column-gap: 1.5rem; /* Vertical rhythm baseline -- multiply for spacing increments. */ --vertical-rhythm: 1.4rem; /* ----- TABLES -------------------------------------------------------- */ /* Compact table row height for dense data tables. */ --table-row-height-dense: 1.6rem; /* Light horizontal hairline between rows. */ --table-hairline: #e5e5e0; } /* ========================================================================== Font face declarations — Mulish -------------------------------------------------------------------------- Six woff2 weight files vendored locally at static/vendor/fonts/mulish/ (200 / 400 / 400-italic / 600 / 600-italic / 900). Sourced from fontsource (OFL); LICENSE shipped alongside. font-display: swap means a brief FOUT (system-sans flash → Mulish swap) on first uncached load. Acceptable for an internal tool. Paths use Django's STATIC_URL convention (/static/...) since this file is served from STATICFILES_DIRS. ========================================================================== */ @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-ExtraLight.0e4306b06b37.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-Regular.7ef9dd981bae.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-Italic.eb38f6f61790.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-SemiBold.9b22febd2ee0.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-SemiBoldItalic.092f6ed1ab8f.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Mulish"; src: url("/static/vendor/fonts/mulish/Mulish-Black.b1fcf0995d33.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Body weight default — explicit so prose.css doesn't have to set it. */ body { font-family: var(--font-prose); font-weight: 400; }