/* PXI design tokens. * * One token sheet for every PXI Market surface. Themes are driven by * [data-theme] on , set before first paint by the inline script in each * page head; the prefers-color-scheme fallback below covers a no-JS load. * Semantic rules: * --pxi-pos / --pxi-neg qualified movement only, never decoration * --pxi-warn tariffs, warnings, active selection * --pxi-info informational / reference signals only */ :root { /* The Pytrel institutional stack. Monospace is intentionally absent from public surfaces: numeric alignment comes from tabular figures on the sans face, not from a code font. */ --pxi-font-sans: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --pxi-font-num: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --pxi-text-xs: 0.6875rem; --pxi-text-sm: 0.8125rem; --pxi-text-base: 0.9375rem; --pxi-text-lg: 1.125rem; --pxi-text-xl: 1.5rem; --pxi-text-hero: 2.5rem; --pxi-space-1: 0.25rem; --pxi-space-2: 0.5rem; --pxi-space-3: 0.75rem; --pxi-space-4: 1rem; --pxi-space-5: 1.5rem; --pxi-space-6: 2rem; /* PXI is a signal desk, not a consumer app: rules, rails and hard intersections form the shared geometry across every market surface. */ --pxi-radius-sm: 0; --pxi-radius-md: 0; --pxi-radius-lg: 0; --pxi-transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --pxi-brand-green: #178a57; --pxi-brand-green-dark: #116746; } /* -- dark (default) ------------------------------------------------------ */ :root, :root[data-theme="dark"] { color-scheme: dark; --pxi-bg: #0a0f17; --pxi-surface: #101823; --pxi-surface-2: #15202e; --pxi-border: #1e2b3b; --pxi-border-strong: #2b3b50; --pxi-text: #e8eef5; --pxi-text-2: #9dacbe; --pxi-muted: #64748b; --pxi-pos: #33c481; --pxi-pos-bg: rgba(51, 196, 129, 0.12); --pxi-neg: #e5484d; --pxi-neg-bg: rgba(229, 72, 77, 0.12); --pxi-warn: #e2a336; --pxi-warn-bg: rgba(226, 163, 54, 0.12); --pxi-info: #4c9eeb; --pxi-info-bg: rgba(76, 158, 235, 0.12); --pxi-chart-grid: #1b2635; --pxi-focus: #6cb1f0; --pxi-shadow: none; --pxi-tape-bg: #070b11; --pxi-scrim: rgba(4, 8, 13, 0.7); } /* -- light --------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --pxi-bg: #f6f8fa; --pxi-surface: #ffffff; --pxi-surface-2: #fbfcfd; --pxi-border: #dfe5ec; --pxi-border-strong: #c3ced9; --pxi-text: #0f1720; --pxi-text-2: #5c6773; --pxi-muted: #8593a2; --pxi-pos: #178a57; --pxi-pos-bg: rgba(23, 138, 87, 0.1); --pxi-neg: #c93a40; --pxi-neg-bg: rgba(201, 58, 64, 0.09); --pxi-warn: #a8731e; --pxi-warn-bg: rgba(226, 163, 54, 0.14); --pxi-info: #2273d1; --pxi-info-bg: rgba(34, 115, 209, 0.09); --pxi-chart-grid: #e9eef3; --pxi-focus: #2273d1; --pxi-shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 2px 8px rgba(15, 23, 32, 0.04); --pxi-tape-bg: #0f1720; --pxi-scrim: rgba(15, 23, 32, 0.4); } /* System fallback when JS never ran: honour the OS preference. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --pxi-bg: #f6f8fa; --pxi-surface: #ffffff; --pxi-surface-2: #fbfcfd; --pxi-border: #dfe5ec; --pxi-border-strong: #c3ced9; --pxi-text: #0f1720; --pxi-text-2: #5c6773; --pxi-muted: #8593a2; --pxi-pos: #178a57; --pxi-pos-bg: rgba(23, 138, 87, 0.1); --pxi-neg: #c93a40; --pxi-neg-bg: rgba(201, 58, 64, 0.09); --pxi-warn: #a8731e; --pxi-warn-bg: rgba(226, 163, 54, 0.14); --pxi-info: #2273d1; --pxi-info-bg: rgba(34, 115, 209, 0.09); --pxi-chart-grid: #e9eef3; --pxi-focus: #2273d1; --pxi-shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 2px 8px rgba(15, 23, 32, 0.04); --pxi-tape-bg: #0f1720; --pxi-scrim: rgba(15, 23, 32, 0.4); } }