:root {
  /* Colors & accents */
  --bg: #1c2320;
  --fg: #d0d0d0;
  --accent: #88f0d0;
  --accent-light: #aaffc3;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --type-base: 1rem;
  --line-height: 1.5;

  /* Spacing */
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;

  /* Radii & shadows */
  --radius: 0.5rem;
  --shadow-light: rgba(0,0,0,0.3);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-splash: 0.4s ease-out;
}

/* Reset & box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global body */
html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: var(--line-height);
  overflow: hidden; /* will override in layout */
}

/* Utility fonts */
body, input, select, button, textarea {
  font-family: var(--font-sans);
}

/* Monospace helper */
.mono { font-family: var(--font-mono); }