/* 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 DASHBOARD WITHOUT REWRITING IT
   -------------------------------------------------
   The dashboard arrives from the vendored Option Desk renderer with its own
   stylesheet already inlined in the head, and it must arrive unchanged: the
   suite asserts the renderer's STYLE string and its markup are present
   verbatim. This sheet is linked after that inline block, so its :root
   declarations win on cascade order at equal specificity, and the
   renderer's own rules resolve their var() references to the values below
   at use time. The dashboard is re-tinted without one byte of it being
   rewritten. The LEGACY BRIDGE section at the end is what does that.

   NO SCRIPT, BY DESIGN
   --------------------
   The sibling Risk Desk service serves its report under
   script-src 'none'. A shared layer has to work under the stricter of the
   two services, so the light mode here 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 on that
   service. A reader's operating-system setting is the only input.

   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-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-figure: -0.02em;  /* large numerals */
  --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;

  /* ---- 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 ---- */
  --od-radius-1: 4px;
  --od-radius-2: 6px;
  --od-radius-3: 8px;
  --od-radius-pill: 999px;
  --od-radius-dot: 50%;

  --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);

  /* ---- LEGACY BRIDGE ----
     The vendored dashboard renderer declares these names in its own inline
     stylesheet and uses them throughout. Redefining them here, from a
     sheet that loads later, re-tints that page without editing it. Do not
     use these names in new rules: they exist to carry the old renderer. */
  --bg: var(--od-ground);
  --panel: var(--od-surface);
  --ink: var(--od-text);
  --muted: var(--od-text-muted);
  --line: var(--od-line);
  --accent: var(--od-accent);
  --up: var(--od-gain);
  --down: var(--od-loss);
  /* The renderer's --warn-* trio is its general attention colour, not a
     degraded colour: it paints the stale dot (style.py:48), the thin and
     unknown liquidity badges (style.py:96) and the caveat rule
     (style.py:126) as well as its warn block. It maps to stale, which is
     what those three mean. The warn block itself is a degraded message on
     both of the renderer's two paths (page.py:698 and page.py:1382), and
     components.css colours that element from the degraded tokens. */
  --warn-bg: var(--od-stale-ground);
  --warn-line: var(--od-stale);
  --warn-ink: var(--od-stale);
}

@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; }
}