:root {
  /* Backgrounds / borders */
  --bg-black: #000;
  --bg-void: #0a0a0a;
  --bg-main: #1a1a1a;
  --bg-panel: #111;
  --border: #333;
  --border-dim: #222;

  /* Text — every tier passes WCAG AA (4.5:1) on every background above */
  --text: #ccc;
  --text-mid: #999;
  --text-dim: #888;

  /* Accents */
  --green: #4caf50;
  --green-light: #81c784;
  --blue: #2196f3;
  --blue-light: #7eb8f7;
  --red: #ef5350;
  --red-light: #ef9a9a;

  /* Typography — one font token, one size scale */
  --font-family: monospace;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 13px;
  --fs-lg: 16px;
  --fs-xl: 22px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;

  /* Layering */
  --z-overlay: 10;
  --z-tabbar: 700;
  --z-drawer: 800;
  --z-modal: 1000;
}

/* Bump the whole type scale for small screens — the single control for "make mobile
   text bigger," instead of scattered per-rule media queries. */
@media (max-width: 768px) {
  :root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;
  }
}

/* Keyboard-navigation visibility (previously missing sitewide) */
:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
}