@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Palette — OKLCH for perceptual uniformity */
  --bg:          oklch(11%  0.018 255);
  --surface:     oklch(17%  0.018 255);
  --surface-hi:  oklch(22%  0.018 255);
  --surface-top: oklch(26%  0.018 255);
  --border:      oklch(32%  0.018 255);
  --border-dim:  oklch(25%  0.015 255);

  --accent:      oklch(58%  0.20  243);
  --accent-hi:   oklch(68%  0.20  243);
  --accent-dim:  oklch(38%  0.12  243);

  --online:      oklch(70%  0.17  142);
  --online-bg:   oklch(25%  0.07  142);
  --warn:        oklch(76%  0.16   84);
  --warn-bg:     oklch(25%  0.07   84);
  --offline:     oklch(58%  0.19   25);
  --offline-bg:  oklch(22%  0.07   25);

  --text:        oklch(94%  0.012 255);
  --text-dim:    oklch(64%  0.018 255);
  --text-faint:  oklch(42%  0.015 255);

  /* Typography */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-label:   'Barlow Condensed', sans-serif;
  --font-ui:      'Barlow', system-ui, sans-serif;

  /* 4pt spacing scale */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s6:  24px;
  --s8:  32px;
  --s12: 48px;
  --s16: 64px;

  /* Border radius */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
}