/* Avid Quant desk design system: the token layer. This is the only stylesheet in this repository that is allowed to contain a colour literal. Every other sheet reads these through var(). A guard in tests/test_design_system.py fails the build if a hex, rgb(), hsl() or a CSS named colour appears in components.css or shell.css. HOW IT REACHES THE REPORT WITHOUT REWRITING IT ---------------------------------------------- The report arrives from the vendored riskdesk.report renderer with its own stylesheet already inlined in the head, and it must arrive unchanged: the suite asserts the renderer's output is present verbatim. This sheet is linked after that inline block, so it wins on cascade order at equal specificity. Unlike the Option Desk renderer, this one declares no custom property at all: report.py:330-365 carries twenty literal colours in ordinary rules. So there is no bridge to write here. Every one of those rules is instead overridden by name in the ADOPTED SELECTORS section of components.css, which is why that section is longer on this service than on the other one. NO SCRIPT, BY DESIGN -------------------- This service serves its report under script-src 'none'. The light mode below is a prefers-color-scheme query and nothing else. There is no theme toggle, no class on the body and no data attribute, because none of those can be set without script here. NO EXTERNAL REQUEST ------------------- System font stacks only. No @font-face, no font file, no icon set, no image host, no CDN. Both services must stay self-contained. Dark is the default and is declared on bare :root. Light redefines the same names inside the media query. No component may declare a colour of its own in either mode. */ :root { /* ---- Surfaces, dark (default) ---- */ --od-ground: #000000; --od-surface: #15171b; --od-surface-raised: #1b1f25; --od-surface-sunken: #0a0b0d; /* ---- Lines ---- */ --od-line: #23262c; --od-line-strong: #343943; /* ---- Text ---- */ --od-text: #e8eaed; --od-text-muted: #939aa6; --od-text-faint: #6b7280; /* ---- Interaction ---- */ --od-accent: #6ea0ff; --od-accent-ink: #06121f; /* Brand signal. Kept for the focus ring and the brand mark only. It is deliberately NOT the selected-state colour: the previous site chrome used this yellow for selected pills, which put it one hue away from the amber that means stale and the orange that means degraded. State colours must not be reachable by a decorative choice. */ --od-signal: #e2e800; --od-signal-ink: #000000; /* ---- Direction: gain and loss ---- Colour is the second channel here, never the only one. Every signed figure also renders a sign character, and the glyph and border-style tokens below give a third channel that survives a monochrome screen, a printout and the common forms of colour blindness. */ --od-gain: #3ddc84; --od-gain-ground: #0b2318; --od-loss: #ff6b6b; --od-loss-ground: #2a1013; --od-gain-glyph: "\25B2"; --od-loss-glyph: "\25BC"; --od-gain-border-style: solid; --od-loss-border-style: dashed; /* ---- Data state ---- Three different facts, three different hues, never merged: stale the figures are real but older than the stated horizon degraded the computation ran with something missing or substituted synthetic the figures were authored, not observed */ --od-stale: #fcd34d; --od-stale-ground: #2a1f06; --od-degraded: #fdba74; --od-degraded-ground: #2a1206; --od-synthetic: #c4b5fd; --od-synthetic-ground: #1a142e; /* ---- Chart furniture ---- There is no gridline token. The vendored Option Desk renderer declares a --grid custom property twice and reads it nowhere, and the Risk Desk charts draw an axis but no gridline, so a gridline token here would be a colour nothing paints. Add one when a chart actually draws one. */ --od-axis: #6b7280; /* ---- Type ---- Seven steps. Reconciles the nine sizes the Option Desk dashboard ships with the six the Risk Desk report ships. System stacks only. */ --od-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --od-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --od-font-size-kpi: 26px; /* the headline figure, and only that */ --od-font-size-1: 20px; /* page title */ --od-font-size-2: 17px; /* stat value */ --od-font-size-3: 14px; /* panel heading */ --od-font-size-4: 13px; /* body */ --od-font-size-5: 12px; /* table cell, control */ --od-font-size-6: 11px; /* hint, note, footer */ --od-font-size-7: 10px; /* uppercase micro label, column head */ --od-line-tight: 1.25; --od-line-body: 1.45; --od-line-loose: 1.6; --od-weight-normal: 400; --od-weight-medium: 600; --od-weight-strong: 650; --od-tracking-tight: -0.015em; /* headline */ --od-tracking-none: 0; --od-tracking-label: 0.07em; /* uppercase micro label */ /* Measure. Prose stops before it becomes a page-wide line. */ --od-measure: 92ch; /* The content column. Tables and chart frames share this right edge so the page has one vertical line rather than several. It is also what keeps a chart from stretching: these SVGs carry a viewBox and no width, so any box wider than the drawing scales the drawing, labels included. */ --od-column: 64rem; /* ---- Space ---- A 4px base. Steps 1 and 3 exist because a dense table needs a 2px and a 6px, and rounding them to the ramp costs a visible row of data. */ --od-space-1: 2px; --od-space-2: 4px; --od-space-3: 6px; --od-space-4: 8px; --od-space-5: 12px; --od-space-6: 16px; --od-space-7: 24px; --od-space-8: 32px; /* Table density. Held as its own pair rather than taken from the ramp: these are the values both services already ship, and a trading floor reads rows per screen before it reads anything else. */ --od-cell-pad-y: 5px; --od-cell-pad-x: 9px; /* ---- Shape ---- Two names the sibling Option Desk service carries are absent here: --od-tracking-figure, which tightens a stat tile's large numerals, and --od-radius-dot, which rounds its status dot. This renderer emits neither element, and a token nothing reads is a decision nobody made. */ --od-radius-1: 4px; --od-radius-2: 6px; --od-radius-3: 8px; --od-radius-pill: 999px; --od-border-hair: 1px; --od-border-rule: 2px; --od-border-flag: 3px; /* ---- Elevation ---- Flat by default. A shadow is spent only where a surface genuinely overlaps another, which on these pages is the sticky column head riding over its own rows. Nothing else earns one. */ --od-elevation-0: none; --od-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.55); /* Hatch for the degraded banner. A second, non-chromatic channel, so a degraded page is still obviously degraded in monochrome. */ --od-degraded-hatch: repeating-linear-gradient( 135deg, rgba(253, 186, 116, 0.12) 0, rgba(253, 186, 116, 0.12) 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 12px); } @media (prefers-color-scheme: light) { :root { --od-ground: #ffffff; --od-surface: #f6f6f7; --od-surface-raised: #ffffff; --od-surface-sunken: #ececee; --od-line: #d4d4d8; --od-line-strong: #a1a1aa; --od-text: #1d1d1f; --od-text-muted: #5a5a60; --od-text-faint: #77777d; --od-accent: #1d4ed8; --od-accent-ink: #ffffff; --od-signal: #5c5f00; --od-signal-ink: #ffffff; --od-gain: #15803d; --od-gain-ground: #e9f6ee; --od-loss: #b91c1c; --od-loss-ground: #fdecec; --od-stale: #854d0e; --od-stale-ground: #fdf6e3; --od-degraded: #9a3412; --od-degraded-ground: #fdf0e7; --od-synthetic: #5b21b6; --od-synthetic-ground: #f3efff; --od-axis: #8a8a90; --od-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12); --od-degraded-hatch: repeating-linear-gradient( 135deg, rgba(154, 52, 18, 0.10) 0, rgba(154, 52, 18, 0.10) 6px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 12px); } } /* Tell the browser which form controls and scrollbars to draw, in both modes, so a native widget never lands as dark-on-dark. */ :root { color-scheme: dark; } @media (prefers-color-scheme: light) { :root { color-scheme: light; } }