:root {
  color-scheme: light dark;

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius */
  --radius-sm: 0.3rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.9rem;

  /* Component sizes */
  --control-min-block: 44px;
  --control-min-block-sm: 34px;
  --icon-button-size: 32px;
  --button-padding-block: 0.65rem;
  --button-padding-inline: 0.8rem;
  --gutter-compact: 4px;
  --sidebar-inline-size: 16rem;
  --metadata-inline-size: 14rem;
  --game-list-inline-size-min: 12rem;
  --game-list-inline-size-preferred: 24vw;
  --game-list-inline-size: 18rem;
  --game-list-inline-size-wide: 20rem;
  --create-form-max-inline-size: 44rem;
  --desktop-game-board-offset: 10rem;
  --stacked-game-board-offset: 14rem;

  /* Semantic theme aliases */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --accent: var(--color-accent);
  --accent-text: var(--color-accent-text);
  --border: var(--color-border);

  /* Reusable surface/control tokens */
  --surface-bg: var(--color-surface);
  --surface-text: var(--color-text);
  --surface-muted: var(--color-muted);
  --surface-border: var(--color-border);
  --panel-bg: var(--surface-bg);
  --panel-text: var(--surface-text);
  --panel-border: var(--surface-border);
  --dialog-bg: var(--surface-bg);
  --dialog-text: var(--surface-text);
  --dialog-border: var(--surface-border);
  --control-bg: var(--surface-bg);
  --control-text: var(--surface-text);
  --control-border: var(--surface-border);
  --control-focus-ring: var(--color-focus-ring);
  --control-disabled-opacity: 0.55;
  --button-bg: var(--control-bg);
  --button-text: var(--control-text);
  --button-border: var(--control-border);
  --button-bg-hover: color-mix(in srgb, var(--button-bg) 92%, var(--accent));
  --button-focus-ring: var(--control-focus-ring);
  --link-text: var(--surface-text);
  --link-text-muted: var(--surface-muted);
  --meta-text: var(--surface-muted);
  --dialog-close-text: var(--dialog-muted, var(--surface-muted));
  --divider-color: var(--surface-border);
  --divider-fade: linear-gradient(
    to bottom,
    transparent,
    var(--divider-color) 8%,
    var(--divider-color) 92%,
    transparent
  );
  --scrollbar-display: none;

  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.sr-only {
  block-size: 1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}