/* Shape, size, space and depth. Values copied from Styles.axaml, MainWindow.axaml and the redesign handoff, not rounded. */
:root {
  /* Radii: 6 to 10 for most things, pills only for tabs, filters and status */
  --radius-kbd: 4px;
  --radius-chip: 5px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --radius-row: 6px;
  --radius-badge-sm: 7px;   /* 28px game badge */
  --radius-card: 8px;
  --radius-logo: 9px;       /* 36px N logo, 34px badge */
  --radius-tile: 10px;      /* server tiles, host cards, rail buttons */
  --radius-dialog: 12px;
  --radius-pill: 999px;

  /* Control heights */
  --h-btn-sm: 28px;
  --h-btn: 30px;
  --h-btn-lg: 32px;
  --h-btn-xl: 34px;
  --h-input: 32px;
  --h-search: 30px;
  --h-pill: 28px;
  --h-pill-sm: 26px;
  --h-status: 22px;
  --h-address-chip: 22px;
  --h-rail-btn: 38px;
  --h-meter: 3px;
  --h-progress: 4px;
  --h-segment: 6px;
  --size-dot: 7px;
  --size-dot-sm: 6px;
  --size-rail-dot: 10px;

  /* Space. The steps the views actually use. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;

  /* Layout 1b, the host rail */
  --layout-rail: 60px;
  --layout-list: 252px;
  --layout-header-tall: 148px;
  --layout-header-slim: 64px;
  --layout-tab-row: 44px;
  --layout-side-panel: 236px;   /* console online players */
  --layout-detail-panel: 280px; /* players detail */
  --layout-settings-nav: 188px;
  --layout-page-pad-x: 28px;    /* home, hosts */
  --layout-page-pad-y: 22px;
  --layout-content-pad: 20px;   /* server tabs */
  --layout-window-w: 1280px;
  --layout-window-h: 800px;

  /* Borders: 1px hairlines everywhere */
  --border-width: 1px;

  /* Depth. Flat. Only dialogs and popovers lift off the page, plus screenshots on the web. */
  --shadow-none: none;
  --shadow-dialog: 0 30px 80px 0 rgba(0, 0, 0, 0.549);
  --shadow-popover: 0 12px 32px 0 rgba(0, 0, 0, 0.451);
  --shadow-screenshot: 0 24px 60px rgba(0, 0, 0, 0.5);
  --ring-badge: 0 0 0 3px; /* @kind shadow */ /* the gap ring round a game badge over art, colour added where used */

  /* Motion. Almost none: hover swaps colour instantly, a spinner turns while waiting on something outside the app. */
  --motion-spinner: 0.9s linear infinite; /* @kind other */
  --motion-fast: 0ms; /* @kind other */
}