:root {
  /* surfaces */
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6; /* optional: subtle alt surface */
  --border: #e5e7eb;

  /* text */
  --text: #111827;
  --muted: rgb(69, 69, 79);

  /* nav/interactive */
  --hover: rgba(0, 0, 0, 0.05);
  --active: rgba(0, 0, 0, 0.08);

  /* accent */
  --accent: #2563eb;
  --accent-contrast: #ffffff;
}

:root.dark {
  --bg: #030712;
  --surface: #111827;
  --surface-2: #0b1220;
  --border: #1f2937;

  --text: #f9fafb;
  --muted: #c5c8dd;

  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.1);

  --accent: #60a5fa;
  --accent-contrast: #0b1220;
}

.preload * {
  transition: none !important;
}

.heatmap-scale {
  display: inline-block;
  width: max-content;
  transform: scale(var(--heatmap-scale, 1));
  transform-origin: top left;
}

/* Optional: if you want to *prevent* horizontal scroll entirely */
.heatmap-no-scroll {
  overflow-x: hidden; /* overrides overflow-x-auto if you replace it */
}

/* Tiny breakpoint toggle (Tailwind doesn't have xs by default) */
.heatmap-only-tiny {
  display: none;
}

/* Choose your "tiny" cutoff:
   360px catches iPhone SE-ish widths in portrait. */
@media (max-width: 360px) {
  .heatmap-hide-on-tiny {
    display: none !important;
  }
  .heatmap-only-tiny {
    display: block !important;
  }
}