:root {
  /* Core colors - dark theme defaults */
  --theme-background: #212120;
  --theme-text: #e8e6e3;

  /* UI text colors */
  --theme-text-primary: #ffffff;
  --theme-text-muted: rgba(255, 255, 255, 0.5);
  --theme-text-secondary: rgba(255, 255, 255, 0.7);
  --theme-text-inverse: #000000;

  /* Surface colors */
  --theme-surface: #000000;
  --theme-surface-elevated: rgba(255, 255, 255, 0.03);
  --theme-surface-hover: rgba(255, 255, 255, 0.08);

  /* Border colors */
  --theme-border: #ffffff;
  --theme-border-muted: rgba(255, 255, 255, 0.2);
  --theme-border-subtle: rgba(255, 255, 255, 0.08);

  /* Overlay/scrim */
  --theme-overlay: rgba(0, 0, 0, 0.5);
  --theme-scrim: rgba(0, 0, 0, 0.6);
  --theme-vignette: rgba(26, 26, 34, 0.85);

  /* Button backgrounds */
  --theme-button-bg: rgba(0, 0, 0, 0.2);
  --theme-button-bg-hover: #212120;

  /* Header gradient - vignette to transparent */
  --theme-header-gradient: linear-gradient(to bottom, rgba(26, 26, 34, 0.85) 0%, transparent 100%);

  /* Highlight colors */
  --theme-highlight-3: rgb(34, 197, 94);
  --theme-highlight-4: rgb(6, 182, 212);
  --theme-highlight-5: rgb(217, 70, 239);
  --theme-highlight-6: rgb(239, 68, 68);
  --theme-highlight-7: rgb(249, 115, 22);
  --theme-highlight-8: rgb(250, 204, 21);
  --theme-highlight-invalid: rgb(156, 163, 175);

  /* Icon colors */
  --theme-icon: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 12px; /* 75% of 16px for mobile */
  }
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'JetBrains Mono', Consolas, monospace;
  background-color: var(--theme-background);
  color: var(--theme-text);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#app {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  will-change: contents;
}

#app:active {
  cursor: grabbing;
}