/* ── BullBreak shared design tokens ────────────────────────────────────── Canonical source of truth for color/typography tokens shared across Studio (app-landing), the report template (report.html.j2), and the sidebar (sidebar.js). See docs/design-tokens.md in the repo root for the full reference, semantic roles, and the Shopify theme's --bb-* mirror. --accent is verified against the actual logo asset (bullbreak.svg fill color), not hand-approximated — see docs/design-tokens.md for how that was checked. Don't hand-edit this value without re-checking the logo. */ :root { --bg: #080d14; /* --canvas is the actual page body's background; --bg is everything else that historically shared its value (the sidebar/menu chrome, sticky bars that need to blend with it) - split out so the light theme can give the page body a different tone from the menu without touching every existing var(--bg) consumer. Dark mode is unchanged: --canvas just aliases --bg here, and only the light override below diverges. */ --canvas: var(--bg); --surface: #0d1117; --surface2: #111820; --border: #1e2633; --border-hl: rgba(18, 25, 102, 0.4); --accent: #121966; --accent-hl: #262f85; --green: #3fb950; --yellow: #d29922; --purple: #cacae3; --danger: #f85149; --text: #e6edf3; --muted: #7d8593; --muted2: #828b98; --mono: 'IBM Plex Mono', monospace; --sans: 'Inter', -apple-system, sans-serif; /* Theme-only tokens: no separate dark/light *design* decision, just an override below so each still reads correctly on a light background. --text-strong is for text that must read as "brightest possible" regardless of theme (e.g. a stat-card's headline number) - in dark mode that's pure white, brighter than --text's slightly-softened #e6edf3. --danger-critical/--positive-strong are a second, more alarming red and a brighter green distinct from --danger/--green, each used only for a single emphasis role (a CRITICAL risk tier label; a form success alert). --heading is the BullBreak logo mark and page/section-title role - dark mode keeps today's white (same as --text-strong, no visual change); light mode uses #121966, live-verified against bullbreak.com's own H1 AND H2 heading color (getComputedStyle, both measured rgb(18,25,102)) rather than --text's deep-navy #080b3d - a title and a stat-card number are different roles even though dark mode drew them the same color. See docs/design-tokens.md. */ --text-strong: #ffffff; --danger-critical: #ff6b6b; --positive-strong: #7ee787; --heading: #ffffff; /* Added for the light-mode color audit follow-up (BULLBREAK_STUDIO_LIGHT_ MODE_COLOR_AUDIT.md) - all three alias an existing dark-mode value here so dark mode is pixel-identical to before; only the light override below diverges. --border-strong: a visibly stronger boundary for essential form controls (currently only the access-key input) - the audit's one confirmed accessibility gap (F08): --border's translucent-on-light value is fine for structural dividers but too weak as a control boundary. --chart-frame/--chart-frame-border: .chart-box's own background/border, split out from --surface/--border so a chart's HTML container can stay a fixed dark "analytical surface" regardless of theme (LM-02) without entangling with --surface's light-mode value (which needed to change for LM-04, see the light override below). */ --border-strong: var(--border); /* The chart frame is the chart's own paper colour (charts/_base.py's _BG, #080d14), not --surface (#0d1117): --surface left a lighter band between the box edge and the chart. The light theme already used #080d14 here; dark keeps its own lighter border line (--border). */ --chart-frame: #080d14; --chart-frame-border: var(--border); /* Added for the LIGHT_MODE_COLOR_FOLLOW_UP review (R1): --chart-frame's own HTML chrome (the info-icon trigger, the lazy-load spinner) was still reading --muted/--purple, which are correctly tuned for light-surface text but nearly invisible against the always-dark chart frame in light mode. Same alias-in-dark pattern as --chart-frame itself. */ --chart-frame-text: var(--muted); --chart-frame-highlight: var(--purple); /* RGB triplets of the tokens above, for sites that build a translucent rgba(...) tint (hover fills, status-badge backgrounds, tinted borders) rather than using a color outright - `rgba(var(--x-rgb), alpha)` is the standard way to keep a translucent tint theme-reactive, since rgba() can't take a hex var() directly. Keep each of these in sync with its hex value above by construction, not by re-deriving it independently. */ --accent-rgb: 18, 25, 102; --purple-rgb: 202, 202, 227; --danger-rgb: 248, 81, 73; --yellow-rgb: 210, 153, 34; --green-rgb: 63, 185, 80; --text-rgb: 230, 237, 243; --muted-rgb: 125, 133, 147; --surface-rgb: 13, 17, 23; --surface2-rgb: 17, 24, 32; /* Holder-composition roles (BB-NP14, research/audits/2026-09-28-natural- persons-design-decisions.md A): the aggregated natural-person category is a neutral, deliberately not a hue, placed after named holders and before "Other"; the remainder ("Other named holders", "Unattributed") is darker and recessive, so luminance orders named > category > other. Same hex as --muted today, but a separate role: change one without the other. */ --holder-natural: #7d8593; --holder-other: #3a4250; --holder-other-line: #667082; /* Typography weights/tracking shared by page and report titles, section and subsection headings, nav items and body copy - see docs/design-tokens.md and research/audits/2026-09-13-studio-dark-theme- typography-first-implementation-audit.md. Sizes stay local per selector (they differ by component and breakpoint), only weight/tracking are centralised here since those are what needs to move together. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --ls-tight: -0.015em; /* large page/report titles */ --ls-snug: -0.01em; /* section/subsection headings */ } /* ── Light theme override ──────────────────────────────────────────────── Opt-in via a `data-theme="light"` attribute on (set by sidebar.js's theme toggle, persisted to localStorage `bb_theme_v1`), not `prefers-color-scheme` - see docs/design-tokens.md's "Light theme" section for the full sourcing/contrast-verification writeup. Values are reused from BullBreakShopify's already-in-production `--bb-*` light palette (assets/base.css) wherever one exists, rather than invented from scratch; `--accent`/`--accent-rgb`/`--border-hl`/`--mono`/`--sans`/the weight and tracking tokens are intentionally NOT redefined here - they're already theme-neutral (same value reads correctly on both backgrounds). Charts (Plotly, market_risk/charts/*.py) are out of scope for this theme - they stay on their fixed dark panel regardless of this attribute. */ :root[data-theme="light"] { --bg: #f7f8fb; /* Shopify --bb-canvas - kept for the sidebar/menu chrome, which stays this shade on request rather than following --canvas below */ --canvas: #efefef; /* live-verified: the most common actual section background on bullbreak.com (getComputedStyle sampled across 11 sections - 7 use rgb(239,239,239), the rest are one-off darker/white sections) - not the same as --bb-canvas above despite the similar name */ /* --surface/--surface2 swapped from the original light-mode ship (color audit LM-04): the original --surface (#eef0fa, Shopify --bb-soft-navy) read as a generic "everything is tinted lavender" card color with no visual distinction from a genuinely-selected state (which already uses a translucent var(--purple-rgb) wash elsewhere - see sidebar.js .bb-sb-it.is-active, report.css's .cycle-family-tab[aria-selected]). --surface is now plain white for ordinary cards/metrics/tables; --surface2 takes on a new "secondary/subordinate" role (table headers, Current reading, methodology) it wasn't previously used for. */ --surface: #ffffff; --surface2: #f7f8fb; --border: rgba(18, 25, 102, 0.12); /* Shopify --bb-border */ --accent-hl: #0d1457; /* Shopify --bb-accent-hover - darkens on hover, correct direction for a light bg */ --green: #16775b; /* Shopify --bb-positive - NOT the dark theme's #3fb950, which fails AA on a light bg */ --yellow: #8a5d00; /* Shopify --bb-warning - same reason */ --purple: #121966; /* dark theme's --purple is a bright on-dark highlight with no light-bg equivalent; reuse --accent's value so on-light text/links stay legible (see design-tokens.md's existing note re: Shopify needing no purple split) */ --danger: #b3392f; /* Shopify has no --bb-danger; reused from report-builder's already-audited light-on-white red (docs/pdf-report-design-system.md / design-tokens.md's "Premium PDF token set") rather than inventing a new one */ --text: #080b3d; /* Shopify --bb-deep-navy */ --muted: #55565c; /* Shopify --bb-muted */ --muted2: #63646a; /* NOT Shopify's --bb-muted2 (#8b8c93, ~3.15:1 on --bg - fails AA for normal text); darkened to ~5.55:1 */ --text-strong: #080b3d; /* --text is already near-maximum contrast in light mode; no separate "brighter" tier needed */ --danger-critical: #b3392f; /* same reasoning - one light-mode red, not two near-identical dark reds that only made sense as a dark-on-dark distinction */ --positive-strong: #16775b; /* same reasoning as --danger-critical, reusing --green's light value */ --heading: #121966; /* live-verified bullbreak.com H1/H2 color - see :root's comment above */ /* --border-strong: audit-recommended #737c89, ~4:1 against both --bg and --surface2 - a real control boundary, not just a structural divider. --chart-frame/--chart-frame-border: #080d14/#30363d - #080d14 is the chart's own true paper_bgcolor (charts/_base.py's _BG), distinct from --surface's new white value; #30363d already exists as Plotly's own axis linecolor in every chart (same file's _LAYOUT), reused here so the HTML container border reads as part of the same dark analytical surface rather than an unrelated new gray. */ --border-strong: #737c89; --chart-frame: #080d14; --chart-frame-border: #30363d; /* #7d8593/#cacae3 - the dark theme's own --muted/--purple values, fixed rather than following --muted/--purple's light-mode values (#55565c/ #121966, tuned for light surfaces) - live-verified 5.24:1 / 12.12:1 against the #080d14 frame (color-audit follow-up R1). */ --chart-frame-text: #7d8593; --chart-frame-highlight: #cacae3; --accent-rgb: 18, 25, 102; /* unchanged - --accent itself doesn't change between themes */ --purple-rgb: 18, 25, 102; --danger-rgb: 179, 57, 47; --yellow-rgb: 138, 93, 0; --green-rgb: 22, 119, 91; --text-rgb: 8, 11, 61; --surface-rgb: 255, 255, 255; --surface2-rgb: 247, 248, 251; --muted-rgb: 85, 86, 92; /* Holder-composition roles, light values (BB-NP14 A; role-derived, contrast checked 2026-09-29 - see docs/design-tokens.md). */ --holder-natural: #6b7486; --holder-other: #c9ced8; --holder-other-line: #8a93a3; }