/* ════════════════════════════════════════════════════════════════════════════ apex-tokens.css — the "Apex Dark" design-token layer. Owner spec: docs/APP_DESIGN_SYSTEM.md (token values, component rules, WCAG table). Philosophy: docs/styling.md (flat, planted, data-first). Load order contract: this file is linked FIRST in every app template, before any surface stylesheet. Surface files keep their own local variable names and re-point them to these tokens in their :root blocks (zero selector churn — see APP_DESIGN_SYSTEM.md §4). Rules (enforced in review): - No literal hex in new CSS — consume --ax-* only. - No new hues: a "new color" need is an opacity/tier step or it's mis-modeled. - Green/red are market/P&L/order semantics ONLY. Accents never color data. ═══════════════════════════════════════════════════════════════════════════ */ /* ── UI scale root (docs/UI_SCALE_MIGRATION.md) ───────────────────────────── The whole app is sized in rem; this single rule scales every surface. --ax-ui-scale is set on by partials/ui_scale_boot.html BEFORE first paint (saved preference in localStorage 'apex_ui_scale', else auto-density: 0.85 when the physical screen is narrower than 1600 CSS px — keyed on screen size, NOT viewport, because panels are iframes). 100% (not 16px) so a user's browser font-size preference still applies underneath. */ html { font-size: calc(100% * var(--ax-ui-scale, 1)); } :root { /* ── Surfaces (background ramp) — §2.1 ─────────────────────────────────── */ --ax-bg-0: #05070C; /* app canvas: desk background, page body */ --ax-bg-1: #0A101B; /* panel/page background — default working surface */ --ax-bg-2: #0F1726; /* raised: cards, table header bands, sticky chrome */ --ax-bg-3: #141E30; /* interactive rest: chips, inputs, hover fills */ --ax-bg-4: #1A2740; /* active/selected fills, pressed states */ /* ── Hairlines & borders — §2.2 ────────────────────────────────────────── */ --ax-line-1: #1C2840; /* default hairline: rows, card edges, dividers */ --ax-line-2: #2A3A58; /* strong: interactive borders, focus, column rules */ /* ── Text ramp — §2.3 (contrast-verified, §7) ──────────────────────────── */ --ax-text-1: #E8EEF7; /* primary: prices, symbols, headings */ --ax-text-2: #A9B7CC; /* secondary: constantly-read non-focal values */ --ax-text-3: #7C8DA6; /* muted: labels, headers, timestamps — READ floor */ --ax-text-4: #55657E; /* faint: DECORATIVE ONLY — never information */ /* ── Market semantics — §2.4 (one set everywhere, incl. the chart) ─────── */ --ax-up: #2BD48A; --ax-up-soft: rgba(43, 212, 138, .13); --ax-down: #F6465D; --ax-down-soft: rgba(246, 70, 93, .13); --ax-halt: #FFB020; --ax-halt-soft: rgba(255, 176, 32, .13); --ax-attention: #FF7A45; --ax-attention-soft: rgba(255, 122, 69, .13); --ax-info: #3D9DFF; --ax-info-soft: rgba(61, 157, 255, .13); --ax-neutral: #7C8DA6; /* zero-data / insufficient sample — never up/down */ --ax-neutral-soft: rgba(124, 141, 166, .13); /* ── Product identity accents — §2.5 (chrome only, never data) ─────────── */ --ax-accent-scanner: #3D9DFF; --ax-accent-sim: #27C2B0; --ax-accent-journal: #8B6CFF; --ax-accent-replay: #CE6BE6; /* orchid — Apex Replay "rewind" family (docs/apex-replay/) */ /* Each page sets --ax-accent once on body; components reference only this. */ --ax-accent: var(--ax-accent-scanner); /* ── Focus, elevation, radius, spacing, motion — §2.6 ──────────────────── */ --ax-focus: 0 0 0 2px color-mix(in srgb, var(--ax-accent) 70%, transparent); --ax-shadow-overlay: 0 8px 24px rgba(0, 0, 0, .35); /* overlays/menus ONLY */ --ax-radius-s: 0.25rem; /* 4px — chips, badges, inline buttons */ --ax-radius-m: 0.5rem; /* 8px — cards, inputs, panels */ --ax-radius-l: 0.75rem; /* 12px — overlays, popovers, modals */ --ax-space: 0.25rem; /* 4px base grid; gaps/padding in multiples */ --ax-dur-1: 120ms; /* hover color/border transitions */ --ax-dur-2: 180ms; /* menu open/close, empty-state reveal */ /* ── Typography — §2.7 ─────────────────────────────────────────────────── */ --ax-font-ui: "Manrope", "Bahnschrift", "Segoe UI Variable Text", "Segoe UI", sans-serif; --ax-font-data: "JetBrains Mono", "Consolas", "Menlo", monospace; /* rem so the scale root applies (§2.7: "px tokens; rem-equivalent in implementation"). Comments give the px value at scale 1. */ --ax-fs-2xs: 0.6875rem; /* 11px — legal floor at scale 1 */ --ax-fs-xs: 0.75rem; /* 12px — column headers; min for interactive text */ --ax-fs-s: 0.8125rem; /* 13px — dense table cells */ --ax-fs-m: 0.875rem; /* 14px — default UI */ --ax-fs-l: 1rem; /* 16px — panel titles */ --ax-fs-xl: 1.25rem; /* 20px — page headings */ --ax-fs-stat: 1.625rem; /* 26px — stat-card numbers */ } /* Self-hosted faces — the SAME latin-subset variable woff2 files the public site ships (static/fonts/, see its VERSION file; OFL 1.1, GDPR-clean). The public site keeps its own brand-layer declarations in public-site.css; both point at identical URLs so the browser caches one copy. swap = first paint never blocks on a font. */ @font-face { font-family: "Manrope"; src: url("/static/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* App-wide focus visibility (§3.7) — today virtually nothing has one. Scoped to :focus-visible so mouse clicks don't ring. */ :focus-visible { outline: none; box-shadow: var(--ax-focus); } /* Motion accessibility: both durations honor reduced-motion. */ @media (prefers-reduced-motion: reduce) { :root { --ax-dur-1: 0ms; --ax-dur-2: 0ms; } }