@import "tailwindcss";

@theme {
  --color-bg: #0e0f11;
  --color-card: #15171a;
  --color-card-2: #181a1e;
  --color-line: rgb(255 255 255 / 0.07);
  --color-ink: #e8e6e1;
  --color-muted: #9a9ca3;
  --color-gold: #c9a24a;
  --color-gold-strong: #dcb45a;
  --color-ok: #4fb383;
  --color-warn: #d9a441;
  --color-bad: #d9605a;
  --radius-card: 10px;
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* Everything is sized in rem, so scaling the root font grows the whole interface with the window
   (16px up to about 1280px wide, then gradually larger; capped at 26px). */
html {
  font-size: clamp(16px, calc(0.75vw + 6.4px), 26px);
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* Dark, slim scroll bars that match the interface (the default light ones stand out too much). */
html {
  color-scheme: dark;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.16) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgb(201 162 74 / 0.55);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:active {
  background: rgb(201 162 74 / 0.8);
  background-clip: content-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

::selection {
  background: rgb(201 162 74 / 0.35);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

pre,
.selectable {
  user-select: text;
}

@keyframes pulse-dot {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}