/** * ChartDeck design tokens (ported from the Atlas tokens; values = the ChartDeck "Holo Glass" brand, * operator 2026-09-29, logo option 269: background #07090D, surface #0F131B, raised #161B26, lines #1F2533, * text #F2F4F8, muted #8C95A6, primary lilac #A9B8FF, accent aqua #7FFFD4, gain #3DDC97, loss #FF6B81, * warning gold #FFD98A, holo gradient #7FFFD4 > #A9B8FF > #FFA8D2 > #FFD98A > #7FE0FF). Canonical copy: * /brand/brand.css (loaded first, carries the Sora @font-face). This file loads right after it. * * One vocabulary for every surface, so a colour, a size or a layer is chosen once here and * named everywhere else. The chart engine (atlas-chart.js) reads the --a-ch-* and the base * colours straight from these variables, so the canvas and the page cannot drift apart. * * Contrast (WCAG 2.x, checked 2026-09-29; bg / panel(surface) / raised / hover): * text #F2F4F8 18.1 / 16.9 / 15.7 / 14.3 - fg-2 #C3C9D4 12.0 / 11.2 / 10.4 / 9.4 * muted #8C95A6 6.6 / 6.2 / 5.7 / 5.2 - lilac #A9B8FF 10.4 / 9.7 / 9.0 / 8.2 * gain #3DDC97 11.3 / 10.5 / 9.8 / 8.9 - loss #FF6B81 7.3 / 6.8 / 6.3 / 5.7 (gain/loss are fine as text * on every surface; the -soft tints are for text ON a tinted chip, all >= 7.5:1). * fg-4 #5A6273 is 3.0:1: decoration and disabled glyphs only, never text somebody has to read. * Filled primary buttons are lilac (or the holo gradient) with DARK text #07090D: 10.4:1 on lilac, and * >= 10.4:1 on every holo stop (aqua 16.3, pink 11.2, gold 14.8, cyan 13.3). Focus rings are aqua. * * The old --at-* names are kept as aliases at the bottom: frozen modules (sectors, trend, * quick panel, connections) and any page that still speaks the old names keep working * without a rename sweep through code nobody is otherwise touching. */ :root { /* -- COLOURS live in /brand/theme.css (dark Holo Glass + the light palette, keyed on html[data-theme]). This file keeps what does not change with the theme. --------- */ /* -- type: Sora everywhere (self-hosted, /brand/brand.css). Numbers use Sora's tabular figures (tnum) instead of a monospace face; --a-mono is kept as a name only. ---- */ /* --a-script: the locale's Noto face for the letters Sora does not have (Cyrillic, CJK, Arabic, Devanagari, Vietnamese, Turkish), set per language below and loaded from Google Fonts by cd-i18n.js (scriptFont). */ --a-script: system-ui; --a-sans: 'Sora', var(--a-script), system-ui, -apple-system, 'Segoe UI', sans-serif; --a-mono: 'Sora', var(--a-script), system-ui, -apple-system, 'Segoe UI', sans-serif; --a-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ========================================================================================= THE SYSTEM (UI tidy-up, operator 2026-10-04). Every stylesheet names these; a literal font size, weight or radius anywhere else fails test/ui-tokens-lint.test.ts (its allow-list is the only way round it, one documented line per exception). TYPE - six steps for the whole product UI, each with the line height that keeps a single- line row on the 4 px grid (--a-lh-; paragraphs use the ratios below instead): --a-fs-2xs 10 / 14 caps labels, badges, counts, keycaps --a-fs-xs 11 / 16 dense data: tables, meta lines, axis-like labels, timestamps --a-fs-sm 12 / 18 body and default UI text --a-fs-md 13 / 20 emphasised UI: toolbar, panel and section titles, primary buttons --a-fs-lg 16 / 24 dialog titles; any text input on a touch screen (iOS never zooms at 16) --a-fs-xl 20 / 28 page titles (settings pages, account, admin, auth) Display ramp - pages OUTSIDE the terminal only (pricing, home, auth, account, admin numbers): --a-fs-2xl 24, --a-fs-3xl 32, --a-fs-4xl 40, and three fluid heads (--a-fs-display-s, --a-fs-display, --a-fs-hero) plus --a-fs-lede (the home intro line) and --a-fs-stat (its big outline numbers). Line height ratios: 1 (single-line controls), --a-lh-tight 1.2 (titles, two-line rows), --a-lh-snug 1.35 (compact text), --a-lh-body 1.5 (paragraphs). WEIGHT - three, nothing heavier: --a-fw-regular 400 (paragraphs), --a-fw-medium 500 (UI text, data), --a-fw-semibold 600 (labels, titles, buttons, numbers that must stand out). NUMBERS - anything that shows a number that changes (prices, changes, volumes, counts, axis- like labels, table columns) sets font-variant-numeric: tabular-nums (.at-num does it), so a digit change never moves its neighbours. SPACING - the 4/8 grid: --a-sp-2 4, --a-sp-4 8, --a-sp-5 12, --a-sp-6 16, --a-sp-7 24, --a-sp-8 32. --a-sp-1 2 px is the one off-grid nudge (a chip's vertical padding, the gap between touching segments). 1 px is a hairline seam, not spacing. Page layout above 32 px uses multiples of 8. (--a-sp-3 = 6 px is retired.) RADII - three and a pill: --a-r-sm 4 chips, badges, tags, keycaps, inputs and selects --a-r-md 8 buttons, segmented controls, menu items, rows, cards --a-r-lg 12 dialogs, popovers, menus, sheets, toasts --a-r-pill pills and round buttons; 50 % for circles. (--a-r-xs is kept as an alias of sm for code that still names it.) BORDERS - one level per surface: --a-border panels, bars, and the dividers inside them (= line-1) --a-border-raised menus, dialogs, popovers and form controls (= line-2) line-3 is a hover state only. RULE: a panel has ONE border level. No bordered card inside a bordered panel: separate the blocks with --a-sp-5 / --a-sp-6 of space and one fill step (--a-well) instead. SELECTED - one look for segmented controls, tabs, chips, toggles, rail icons and the active timeframe: --a-sel-bg (accent tint) + --a-sel-fg (accent text) + --a-sel-ring (an inset accent hairline). High contrast swaps the ring for a solid accent line (theme.css), so a selected segment never differs by a grey hairline alone. FOCUS - one ring, keyboard only: 2 px --a-focus outline, 2 px out, following the element's radius (text fields: on their edge). theme.js marks after a mouse / touch press and clears it on the next key, so a click never leaves a ring behind. No component sets its own focus outline or a box-shadow halo. ========================================================================================= */ --a-fs-2xs: 10px; --a-fs-xs: 11px; --a-fs-sm: 12px; --a-fs-md: 13px; --a-fs-lg: 16px; --a-fs-xl: 20px; --a-fs-2xl: 24px; --a-fs-3xl: 32px; --a-fs-4xl: 40px; --a-fs-display-s: clamp(26px, 4vw, 40px); --a-fs-display: clamp(28px, 5vw, 48px); --a-fs-hero: clamp(42px, 10.4vw, 108px); --a-fs-lede: clamp(16px, 2.2vw, 19px); --a-fs-stat: clamp(56px, 9vw, 88px); --a-fs-ios: var(--a-fs-lg); --a-lh-2xs: 14px; --a-lh-xs: 16px; --a-lh-sm: 18px; --a-lh-md: 20px; --a-lh-lg: 24px; --a-lh-xl: 28px; --a-lh-tight: 1.2; --a-lh-snug: 1.35; --a-lh-body: 1.5; --a-fw-regular: 400; --a-fw-medium: 500; --a-fw-semibold: 600; --a-num: tabular-nums; --a-track-caps: .08em; --a-track-brand: .30em; /* -- spacing, heights, radii ------------------------------------------------- */ --a-sp-1: 2px; --a-sp-2: 4px; --a-sp-4: 8px; --a-sp-5: 12px; --a-sp-6: 16px; --a-sp-7: 24px; --a-sp-8: 32px; --a-h-xs: 20px; --a-h-sm: 24px; --a-h-md: 28px; --a-h-lg: 36px; --a-h-xl: 44px; --a-r-sm: 4px; --a-r-md: 8px; --a-r-lg: 12px; --a-r-pill: 999px; --a-r-xs: var(--a-r-sm); /* -- borders, selected, focus (colours come from theme.css) --------------------- */ --a-border: var(--a-line-1); --a-border-raised: var(--a-line-2); --a-well: var(--a-glass); --a-sel-bg: var(--a-accent-t2); --a-sel-fg: var(--a-accent); --a-sel-ring: inset 0 0 0 1px var(--a-accent-t3); --a-ring-w: 2px; --a-ring-off: 2px; /* -- layers. One scale for the whole page: every collision we have had was two files each picking "a big number". ------------------------------------- */ --z-chart: 0; --z-chart-overlay: 4; --z-pane-chrome: 10; --z-seam: 12; --z-bars: 20; --z-view: 30; --z-drawer: 40; --z-float: 50; --z-menu: 60; --z-dialog: 80; --z-toast: 90; --z-shield: 100; --z-screenshot: 110; /* -- motion ------------------------------------------------------------------ */ --a-dur-1: 120ms; --a-dur-2: 180ms; /* -- layout ------------------------------------------------------------------ */ --a-topbar-h: 48px; /* the top toolbar (34 px controls inside; operator 2026-09-30: a little fatter) */ --a-stats-h: 28px; --a-status-h: 30px; /* the bottom bar: range presets, clock, feed */ --a-rail-w: 44px; /* the left drawing bar (#cd-drawbar) */ --a-wbar-w: 62px; /* the right widget bar (icon tiles + a word under each, 2026-10-15) */ --a-panel-w: 320px; /* a right-side widget panel */ --a-tabs-h: 30px; /* -- legacy aliases ---------------------------------------------------------- --at-dim was the SECONDARY text colour and --at-dimmer the tertiary; #4a5668 failed contrast for text, so the pair moves one step up the ramp (fg-2 / fg-3). Non-text uses of the old dimmer (lamp and dot fills) name --a-fg-4 directly. */ --at-bg: var(--a-bg); --at-panel: var(--a-panel); --at-raised: var(--a-raised); --at-line: var(--a-line-1); --at-line-2: var(--a-line-2); --at-text: var(--a-fg-1); --at-dim: var(--a-fg-2); --at-dimmer: var(--a-fg-3); --at-accent: var(--a-accent); --at-up: var(--a-up); --at-down: var(--a-down); --at-warn: var(--a-warn); --at-mono: var(--a-mono); --at-sans: var(--a-sans); /* Names the engine plugin files (rail, studies, drawing popovers) reach for with a hard-coded fallback. Mapped here so those popovers take the page's palette rather than their slate fallbacks, and a token change reaches them too. */ --a-text: var(--a-fg-1); --a-muted: var(--a-fg-3); --a-line: var(--a-line-2); --a-panel-2: var(--a-raised); --a-font: var(--a-sans); --a-accent-soft: var(--a-accent-t2); } /* FOCUS: the one ring (THE SYSTEM above). Keyboard focus is always visible and always this ring; after a mouse or touch press (theme.js: ) a control that took focus programmatically shows none. Text fields keep it on their own edge, because a caret needs a frame whatever moved it there. */ :focus-visible { outline: var(--a-ring-w) solid var(--a-focus, #7FFFD4); outline-offset: var(--a-ring-off); } input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline-offset: -1px; } :root[data-pointer] :focus-visible:not(input):not(textarea):not(select):not([contenteditable]) { outline: none !important; } /* Native dropdown lists (operator 2026-10-15: "dropdown went white?" - the order book's group select): Chrome on Windows draws the option list on WHITE when the select has its own (transparent) background, while the options inherit our light text, so they all but vanish. Every select's options take the theme's panel and text, in every theme. */ select option, select optgroup { background-color: var(--a-panel); color: var(--a-fg-1); } select option:disabled { color: var(--a-fg-3); } /* An aggregated chart (cd-agg.js) with an exchange not answering: "9/10 exchanges" in the warning colour. */ .cd-agg-gap { color: var(--a-warn) !important; } /* Numbers never jitter sideways as digits change (Sora tabular figures). */ .at-num { font-family: var(--a-mono); font-variant-numeric: var(--a-num); } code, kbd { font-family: var(--a-code); } /* LINE BREAKS AND TRACKING BY SCRIPT (screenshot review 2026-10-13). Korean broke inside words ("지/표"): keep-all breaks at spaces only. Japanese and Chinese broke two-character words across lines ("全/体", "警/報"): strict rules, and phrase-aware breaking where the browser has it. Letter-spacing made for Latin capitals pulls Devanagari and CJK apart ("म ल्टी-चा र्ट"): those scripts and Arabic take none. */ :lang(ko) { word-break: keep-all; overflow-wrap: break-word; } :lang(ja), :lang(zh) { line-break: strict; } /* Japanese (review 2026-10-19): phrase-aware breaking where the browser has it, else keep-all (break at punctuation and spaces only), with anywhere as the last resort so a long run still wraps. */ :lang(ja) { word-break: keep-all; overflow-wrap: anywhere; } @supports (word-break: auto-phrase) { :lang(ja) { word-break: auto-phrase; } } /* Chinese: the browser's phrase breaking covers Japanese only, so the translated text carries its own word boundaries (zero-width spaces from cd-i18n.js zhWords) and a line breaks only there; text without them still wraps when it must. */ :lang(zh) { word-break: keep-all; overflow-wrap: anywhere; } :lang(ja) *, :lang(zh) *, :lang(ko) *, :lang(hi) *, :lang(ar) * { letter-spacing: 0 !important; } :lang(hi) * { text-transform: none !important; } /* Japanese and Hindi left one word alone on a paragraph's last line (review 2026-10-19): the browser balances the last lines where it can (text-wrap: pretty; ignored elsewhere, no harm). */ :lang(ja) :is(p, li, dd, figcaption, h1, h2, h3), :lang(hi) :is(p, li, dd, figcaption, h1, h2, h3) { text-wrap: pretty; } /* CHINESE FALLBACK FONTS (screenshot review 2026-10-13). Sora has no Chinese, so the system picked the fallback, and on Windows that was a Simplified-region font even for zh-TW: U+7D50 (the Traditional form) was drawn the mainland way and read as the Simplified character at 11 px. Each Chinese gets its own region's fonts after Sora. */ :root:lang(zh-TW) { --a-sans: 'Sora', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif; --a-mono: 'Sora', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif; } :root:lang(zh-CN) { --a-sans: 'Sora', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif; --a-mono: 'Sora', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif; } /* LOCALE FALLBACK FACES (screenshot review 2026-10-19: Sora has no Cyrillic or CJK, so those pages fell back to whatever the system had and the home headline lost its gradient). Each language that needs one names its Noto face here; the stylesheet is self-hosted (/assets/fonts/.css, unicode-range slices; scripts/build-locale-fonts.mjs), loaded only for that language (cd-i18n.js scriptFont; CD_LOCALE_FONTS=off: src/web/locale-fonts.ts). Chinese keeps its region's system fonts first (above), with the Noto face behind them. */ :root:lang(ru), :root:lang(uk), :root:lang(vi), :root:lang(tr) { --a-script: 'Noto Sans'; } :root:lang(ja) { --a-script: 'Noto Sans JP'; } :root:lang(ko) { --a-script: 'Noto Sans KR'; } :root:lang(zh-CN) { --a-script: 'Noto Sans SC'; } :root:lang(zh-TW) { --a-script: 'Noto Sans TC'; } :root:lang(ar) { --a-script: 'Noto Sans Arabic'; } :root:lang(hi) { --a-script: 'Noto Sans Devanagari'; }