html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", sans-serif, system-ui, -apple-system;
  overflow-x: hidden;
}

:root {
  /* oklch */
  --bg-dark: oklch(0.1 0.085 280);
  --bg: oklch(0.15 0.085 280);
  --bg-light: oklch(0.2 0.085 280);
  --text: oklch(0.96 0.1 280);
  --text-muted: oklch(0.76 0.1 280);
  --highlight: oklch(0.5 0.17 280);
  --border: oklch(0.4 0.17 280);
  --border-muted: oklch(0.3 0.17 280);
  --primary: oklch(0.76 0.17 280);
  --secondary: oklch(0.76 0.17 100);
  --danger: oklch(0.7 0.17 30);
  --warning: oklch(0.7 0.17 100);
  --success: oklch(0.7 0.17 160);
  --info: oklch(0.7 0.17 260);
}

body.light {
  /* oklch */
  --bg-dark: oklch(0.92 0.085 280);
  --bg: oklch(0.96 0.085 280);
  --bg-light: oklch(1 0.085 280);
  --text: oklch(0.15 0.17 280);
  --text-muted: oklch(0.4 0.17 280);
  --highlight: oklch(1 0.17 280);
  --border: oklch(0.6 0.17 280);
  --border-muted: oklch(0.7 0.17 280);
  --primary: oklch(0.4 0.17 280);
  --secondary: oklch(0.4 0.17 100);
  --danger: oklch(0.5 0.17 30);
  --warning: oklch(0.5 0.17 100);
  --success: oklch(0.5 0.17 160);
  --info: oklch(0.5 0.17 260);
}

/* Responsive typography */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 550px) {
  html {
    font-size: 13px;
  }
}