/* Hundchen design tokens (ADR-0008). Every colour, size and radius used by the web surfaces
   comes from here. Dark-first. State is never carried by colour alone (see components.css). */

:root {
  color-scheme: dark;

  /* Atmosphere: a midnight-blue gradient sampled from the AH reference, reproduced in CSS. */
  --hx-sky-0: #04091d;
  --hx-sky-25: #050b25;
  --hx-sky-50: #090f33;
  --hx-sky-70: #0c1649;
  --hx-sky-85: #142068;
  --hx-sky-100: #24369a;

  /* Surfaces: translucent navy work panels over the gradient. */
  --hx-surface: rgba(5, 18, 62, 0.74);
  --hx-surface-sunken: rgba(2, 10, 38, 0.55);
  /* Same hue as --hx-surface, fully opaque: for the one place translucency is wrong — a sticky
     scroll-region header, which must fully occlude rows scrolling underneath it (components.css). */
  --hx-surface-opaque: #05123e;
  --hx-rail: rgba(2, 10, 40, 0.62);
  --hx-header: rgba(2, 9, 36, 0.78);

  /* Lines. */
  --hx-line: rgba(140, 165, 230, 0.22);
  --hx-line-strong: rgba(160, 185, 245, 0.42);
  --hx-line-faint: rgba(140, 165, 230, 0.12);

  /* Text (contrast on --hx-surface: text 14:1, muted 8:1, dim 5:1; "dim" is for panels only,
     never for text sitting directly on the bright bottom of the gradient). */
  --hx-text: #eaf0fb;
  --hx-text-muted: #a9b6d6;
  --hx-text-dim: #8593b8;

  /* Accent and state tints. They REINFORCE meaning; text, glyphs and border style carry it. */
  --hx-accent: #8fb0ff;
  --hx-focus: #b9ceff;
  --hx-ok: #7fd6b8;
  --hx-warn: #f0c66a;
  --hx-error: #ff9d92;
  --hx-neutral: #a9b6d6;

  /* Type. System fonts only: no web fonts, no third-party requests. */
  --hx-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --hx-fs-micro: 0.6875rem; /* 11px compact uppercase headings */
  --hx-fs-small: 0.8125rem;
  --hx-fs-body: 0.9375rem;
  --hx-fs-h1: 1.75rem;
  --hx-fs-kpi: 1.625rem;
  --hx-fs-hero: 2.5rem;
  --hx-track-micro: 0.14em;

  /* Geometry. */
  --hx-radius: 10px;
  --hx-radius-sm: 6px;
  --hx-radius-pill: 999px;
  --hx-space-1: 4px;
  --hx-space-2: 8px;
  --hx-space-3: 12px;
  --hx-space-4: 16px;
  --hx-space-5: 24px;

  --hx-rail-width: 232px;
  --hx-rail-width-icons: 68px;
  --hx-header-height: 72px;
}