/* ============================================================================
   MetarGame — Spacing, radii, shadows
   Compact, instrument-panel density. Cards hug their data. The signature
   surface treatment is the "RPG window" bevel: a 2px frame plus inset
   highlight/shadow that reads as a chunky pixel-art panel.
   ============================================================================ */
:root {
  /* ---- Spacing scale (tight by design) ---- */
  --space-1: 2px;
  --space-2: 5px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 11px;   /* default card padding-y / gaps */
  --space-6: 13px;   /* default card padding-x */
  --space-7: 14px;   /* screen padding */
  --space-8: 18px;
  --space-9: 26px;

  /* ---- Radii (soft on glass, sharp on pixels) ---- */
  --radius-chip: 7px;
  --radius-pill: 8px;
  --radius-card: 12px;
  --radius-screen: 20px;
  --radius-pixel: 2px;   /* graph bars, hourly dots — barely rounded */
  --radius-round: 999px;

  /* ---- MODERN radii ---- */
  --radius-tile: 20px;   /* data tiles */
  --radius-bar: 18px;    /* category banner */
  --radius-search: 16px; /* search field, raw block, settings inputs */
  --radius-btn: 16px;    /* square glass buttons */
  --radius-sheet: 26px;  /* bottom sheet */

  /* ---- Bevel / shadow system ---- */
  /* The glass card frame: 2px border + inset bevel + soft drop. */
  --shadow-bevel: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  --shadow-card:  inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo), 0 4px 14px -6px #000a;
  /* Sunken inset (metric tiles inside a card). */
  --shadow-inset: inset 1px 1px 0 #ffffff18, inset -1px -1px 0 #00000044;
  /* Pixel-bar relief (TAF/hourly chunky blocks). */
  --shadow-pixel: inset 1px 1px 0 #ffffff44, inset -1px -1px 0 #00000077;
  /* Device drop. */
  --shadow-device: 0 0 0 2px #1d2740, 0 24px 50px -18px #000;
  /* Text legibility over the scene. */
  --text-shadow-scene: 0 2px 6px #000a;

  /* ---- MODERN shadows + blur ---- */
  --shadow-tile: 0 10px 30px -18px #000;   /* data tile lift */
  --shadow-bar: 0 8px 26px -14px #000;     /* category banner */
  --shadow-btn: 0 6px 20px -10px #000;     /* glass buttons / search */
  --blur-tile: blur(18px); /* @kind other */
  --blur-glass: blur(16px); /* @kind other */

  /* ---- Glass blur ---- */
  --blur-card: blur(10px); /* @kind other */
  --blur-chip: blur(2px); /* @kind other */

  /* ---- Layout ---- */
  --card-gap: 11px;
}