@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap");
@import "./tokens.css";
@import "./animations.css";

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

html, body, #app { height: 100%; overflow: hidden; }

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  transform: translateZ(0);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); transition: background var(--t-base); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

:focus-visible { outline: 1px solid var(--border-focus); outline-offset: 2px; }
::selection { background: var(--accent-dim); color: var(--accent-fg); }

button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font-family: inherit; background: none; border: none; color: inherit; }
img { display: block; }
a { color: inherit; text-decoration: none; }

input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-fg);
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}
input[type="range"]::-webkit-slider-thumb:hover { background: var(--accent-bright); transform: scale(1.15); }

.mono { font-family: var(--font-ui); letter-spacing: var(--tracking-wide); }
