/* Hallmark · macrostructure: Workbench · genre: atmospheric · theme: Vespryx (brand-locked)
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 *
 * THE TOKENS, AND WHY THEY ARE A FILE
 *
 * core/theme.mjs opens by naming the problem this solves: the palette "already
 * appears in three places ... This module is the single source so a fourth surface
 * cannot invent a fifth shade of green." The settings page and the popup WERE that
 * fifth surface. Both hard-coded their own hexes, and options.css carried exactly
 * zero custom properties, so every colour in the extension's own UI was a hand-copy
 * of a value defined as data somewhere else.
 *
 * These are not decorative choices. The greens, reds, ambers and purples are the
 * SAME ones the walls are drawn in, and the regime panel names them out loud
 * ("AMBER 50.00 · max-gamma pin"). A settings page that drifts to a different
 * amber is not merely off-brand, it teaches the wrong colour for a line the chart
 * is about to label.
 *
 * Kept in sync with core/theme.mjs by hand, because CSS cannot import an .mjs and
 * an extension has no build step. test/uiTokens.test.mjs asserts they match, so
 * the copy cannot drift silently the way the last one did.
 */
:root {
  /* Surfaces, darkest to lightest. COLOR.navy / COLOR.panel / COLOR.line */
  --tdx-navy: #08090c;
  --tdx-panel: #0d0f13;
  --tdx-line: #23262d;
  --tdx-slate: #8b939e;
  --tdx-white: #eef1f4;

  /* Semantic. These are the wall colours; do not substitute. */
  --tdx-accent: #3d9bff;
  --tdx-green: #22c55e;
  --tdx-red: #ef4444;
  --tdx-amber: #f59e0b;
  --tdx-purple: #a855f7;
  --tdx-cyan: #38bdf8;

  /* Lighter text variants, for saturated colour on a dark fill. theme.mjs TEXT */
  --tdx-green-text: #4ade80;
  --tdx-red-text: #f87171;

  /* Three shades popup.css had invented for itself before it was migrated onto
   * these tokens. Named rather than deleted: they are real steps in the same
   * slate/blue ramp, and the alternative was rounding them to a neighbour and
   * flattening contrast the popup depends on. */
  --tdx-slate-dim: #6b7280;    /* between line and slate: muted body copy */
  --tdx-white-dim: #d3d8de;    /* one step under white: secondary text */
  --tdx-accent-deep: #2563eb;  /* pressed / active accent */
  --tdx-accent-press: #1d4ed8; /* one step deeper again, for :active */

  /* VESPRYX BRAND, sampled from the supplied logo kit rather than guessed.
   * The wordmark is chrome and the accent is the blue in the icon's centre bar.
   * These carry the identity; the dealer colours above carry MEANING and are
   * deliberately untouched, because the regime panel names them out loud and a
   * rebrand that moved the amber would make the chart's own caption wrong. */
  --tdx-accent-hi: #7cc9f8;    /* lifted accent, for :hover on a filled button */
  --vx-glow: #85e1fd;          /* brightest highlight in the mark */
  --vx-deep: #195ebf;          /* deep blue in the icon ring */
  --vx-chrome-hi: #f2f5f8;     /* wordmark highlight */
  --vx-chrome: #b8c2cc;        /* wordmark midtone */
  --vx-chrome-lo: #5b646d;     /* wordmark shadow */
  --vx-black: #040404;         /* the kit's own background, darker than navy */

  /* CHANNELS, for rgba() with a literal alpha. A var() cannot be interpolated
   * inside rgba(), so anything needing transparency has to reference the raw
   * triplet instead. This is the reason popup.css drifted: without these there
   * was no token-shaped way to write a translucent border, so it wrote hex. */
  --tdx-navy-rgb: 8, 9, 12;
  --tdx-panel-rgb: 13, 15, 19;
  --tdx-slate-rgb: 139, 147, 158;
  --tdx-accent-rgb: 61, 155, 255;
  --tdx-accent-deep-rgb: 37, 99, 235;
  --tdx-blue-rgb: 59, 130, 246;
  --tdx-green-rgb: 34, 197, 94;
  --tdx-red-rgb: 239, 68, 68;
  --tdx-amber-rgb: 245, 158, 11;

  /* Raised surface between panel and navy, for rows inside a card. */
  --tdx-raise: #191c22;

  /* Sampled from the v2 mockup's own inline styles rather than eyeballed off a
   * screenshot. Three steps the ramp above genuinely did not have, which is why
   * the first rebuild pass looked flat next to the target: every card border, the
   * active tab and all secondary body copy were rounding to a neighbour.
   *
   *   --tdx-line-soft  card and segmented-control borders (#1d2027). One step
   *                    under --tdx-line, which the mockup reserves for the
   *                    heavier panel edge.
   *   --tdx-raise-hi   the ACTIVE tab and segment fill (#1e222a). Measured off
   *                    the rendered mockup, not guessed.
   *   --tdx-white-2    secondary body copy (#a7aeb8). Sits between --tdx-slate
   *                    and --tdx-white-dim, and carries most of the text.
   *
   * --vx-blue is the mockup's literal accent for premium figures and links. It is
   * NOT --tdx-accent and must not be merged into it: --tdx-accent is mirrored from
   * core/theme.mjs, which test/uiTokens.test.mjs pins, and that value is shared
   * with chart drawing code. A UI-only blue belongs in the brand block. */
  --tdx-line-soft: #1d2027;
  --tdx-raise-hi: #1e222a;
  /* The card gradient's two stops. A card is lit from the top in the v2 mockup
   * (#0f1216 -> #0c0e12) rather than filled flat with --tdx-panel, and that
   * gradient plus a drop shadow is most of what makes six stacked cards read as
   * instrument panels instead of as a form. Both stops straddle --tdx-panel, so
   * this is a lighting decision, not a new surface colour. */
  --tdx-panel-hi: #0f1216;
  --tdx-panel-lo: #0c0e12;
  --tdx-white-2: #a7aeb8;
  --tdx-line-hi: #31353d;      /* the one visible border: ghost buttons */
  --tdx-purple-text: #c4a0f8;  /* purple on a dark fill, matching green/red-text */
  --vx-blue: #3b9dff;
  --vx-blue-rgb: 59, 157, 255;

  /* Row hairline. Deliberately an alpha rather than a hex: it sits on several
   * different fills in the popup and a solid line banded visibly on the darker
   * ones. */
  --tdx-hairline: rgba(150, 158, 168, 0.09);

  /* 4pt spacing scale. */
  --tdx-space-2: 2px;
  --tdx-space-4: 4px;
  --tdx-space-6: 6px;
  --tdx-space-8: 8px;
  --tdx-space-12: 12px;
  --tdx-space-16: 16px;
  --tdx-space-20: 20px;
  --tdx-space-24: 24px;
  --tdx-space-32: 32px;
  --tdx-space-40: 40px;

  /* Type. A system stack on purpose: bundling a webfont into an extension costs
   * a download and a CSP surface for a settings page nobody stares at. Hierarchy
   * comes from weight, size and tracking instead. */
  --tdx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --tdx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --tdx-text-xs: 11px;
  --tdx-text-sm: 12px;
  --tdx-text-base: 13px;
  --tdx-text-md: 15px;
  --tdx-text-lg: 19px;
  --tdx-text-xl: 26px;

  --tdx-radius: 10px;
  --tdx-radius-sm: 7px;
  --tdx-radius-pill: 999px;

  --tdx-rule: 1px solid var(--tdx-line);
  --tdx-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Named easings only. Never the browser default `ease`, never overshoot on UI. */
  --tdx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tdx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tdx-dur-fast: 110ms;
  --tdx-dur: 180ms;
}

/* Spatial motion collapses to a crossfade rather than vanishing entirely: an
 * instant state change with no transition reads as a rendering glitch. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tdx-dur-fast: 0ms;
    --tdx-dur: 0ms;
  }
}