/* Design tokens — Steam 2003 (VGUI) olive palette, taken from the original default.css */
:root {
  color-scheme: dark;

  /* surfaces */
  --c-bg: #4d5844;            /* windows, page */
  --c-bg-sunken: #3f4737;     /* inputs, lists, pressed buttons */
  --c-bg-deep: #373e30;       /* focused input, table header */
  --c-bg-darker: #2f362a;     /* page backdrop behind windows */
  --c-bg-hover: #3f4737c2;
  --c-bg-row: #00000014;      /* zebra rows */

  /* bevels */
  --c-light: #899180;
  --c-dark: #282f22;
  --c-shade: #00000040;

  /* text */
  --c-text: #d8dfd3;
  --c-text-dim: #a8b19f;
  --c-text-faint: #7e8875;
  --c-accent: #c6b652;        /* links, highlights */
  --c-select: #958831;        /* selection / active tab / progress */
  --c-select-text: #ffffff;

  /* status */
  --c-ok: #a3c46c;
  --c-warn: #e0bb4f;
  --c-error: #e0866a;
  --c-info: #9cc0cf;

  /* chart series, fixed order — validated on the chart surface #3f4737:
     CVD adjacent ΔE ≥ 12.1, normal-vision ΔE ≥ 21.9, contrast ≥ 3.3:1, chroma ≥ 0.105 */
  --c-series-1: #d4bf3a;
  --c-series-2: #5fb3e0;
  --c-series-3: #e57f4a;
  --c-series-4: #b48ae6;
  --c-series-5: #8ccf5a;
  --c-series-6: #e6728f;
  --c-chart-grid: #4d5844;
  --c-chart-seq: #d4bf3a;     /* sequential (heatmap) hue */

  /* type */
  --font: Tahoma, Verdana, "Segoe UI", Geneva, "DejaVu Sans", "Noto Sans", sans-serif;
  --font-mono: "Lucida Console", Consolas, "DejaVu Sans Mono", monospace;
  --fs-xs: 10px;
  --fs-s: 11px;
  --fs: 12px;
  --fs-m: 13px;
  --fs-l: 15px;
  --fs-xl: 18px;
  --fs-xxl: 22px;

  /* spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;
  --gutter: 16px;
  --page-max: 1280px;
  --control-h: 26px;

  /* bevel shorthands (border-color order: top right bottom left) */
  --bevel-raised: var(--c-light) var(--c-dark) var(--c-dark) var(--c-light);
  --bevel-sunken: var(--c-dark) var(--c-light) var(--c-light) var(--c-dark);
}

@media (pointer: coarse) {
  :root {
    --control-h: 36px;
    --fs: 13px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 24px;
  }
}