:root {
  --bg:           #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary:  #ebebeb;
  --fg:           #111111;
  --fg-secondary: #555555;
  --fg-tertiary:  #999999;
  --accent:       #111111;
  --border:       rgba(0, 0, 0, 0.1);
  --border-strong:rgba(0, 0, 0, 0.2);
  --cols: 4;
  --gap:  10px;
}

[data-theme="dark"] {
  --bg:           #111111;
  --bg-secondary: #1a1a1a;
  --bg-tertiary:  #222222;
  --fg:           #eeeeee;
  --fg-secondary: #999999;
  --fg-tertiary:  #555555;
  --accent:       #eeeeee;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.16);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input  { font-family: inherit; color: inherit; background: none; border: none; outline: none; }

@media (max-width: 640px) {
  :root { --cols: 2; --gap: 6px; }
}