/* BG DIGITAL HUB — Design Tokens v1
   Single source of truth. No component hardcodes a hex, radius, or spacing value.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600&display=swap');

:root {
  /* — SURFACES — */
  --bg-base:    #0A0E14;
  --bg-sunken:  #070A0F;
  --surface-1:  rgba(255,255,255,0.03);
  --surface-2:  rgba(255,255,255,0.05);
  --surface-3:  rgba(255,255,255,0.07);

  /* — BRAND ACCENTS — */
  --accent:      #00F0FF;
  --accent-deep: #0072FF;
  --accent-dim:  rgba(0,240,255,0.12);
  --accent-line: rgba(0,240,255,0.30);

  /* — STATUS — */
  --ok:   #3DDC97;
  --warn: #FFB454;
  --fail: #FF5C7A;
  --idle: #5B6675;

  /* — TEXT — */
  --text-hi:  #EDF1F7;
  --text-mid: #A7B0BE;
  --text-lo:  #6B7585;

  /* — BORDERS — */
  --line:      rgba(255,255,255,0.08);
  --line-soft: rgba(255,255,255,0.05);

  /* — GLASS — */
  --glass-blur:     32px;
  --glass-saturate: 1.6;
  --glass-border:   1px solid var(--glass-rim);
  --glass-radius:   18px;
  --glass-radius-sm:12px;
  --glass-rim:      rgba(255,255,255,0.14);
  --glass-fill:     linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.035) 38%, rgba(255,255,255,0.02) 100%);
  --glass-sheen:    inset 0 1px 0 rgba(255,255,255,0.16), inset 1px 0 0 rgba(255,255,255,0.04);

  /* — ELEVATION — */
  --elev-1: 0 1px 2px rgba(0,0,0,0.4);
  --elev-2: 0 10px 30px rgba(0,0,0,0.5), var(--glass-sheen);
  --elev-3: 0 20px 60px rgba(0,0,0,0.6), var(--glass-sheen);

  /* — SPACING (4px base) — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* — TYPE — */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}