/* Self-hosted webfonts. Before this, ``font-family: Inter`` resolved
   only on machines with Inter installed; everywhere else the body fell
   back through ``ui-sans-serif`` → ``system-ui`` → the platform default,
   so the same Studio rendered with different metrics on Linux servers,
   stock Windows boxes, and macOS without Inter. ``@fontsource`` bundles
   the WOFF2 files locally and emits one ``@font-face`` per weight with
   ``font-display: swap`` so the body text shows immediately in the
   fallback stack and re-rasterizes once Inter is ready. */
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/jetbrains-mono/400.css";
@import "@fontsource/jetbrains-mono/500.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* AMX Studio design tokens — dark-only.
   Warm-neutral surfaces + amber accent. CSS custom properties power
   both Tailwind classes (theme.extend.colors) and a small set of
   ad-hoc utilities. AMX Studio is intentionally single-theme so
   the palette can be tuned without juggling two contrast budgets. */
:root {
  color-scheme: dark;

  --bg: 15 15 14;
  --surface: 26 25 24;
  --surface-subtle: 19 17 15;
  --surface-raised: 31 29 27;
  --border: 42 39 35;
  --border-strong: 61 57 52;

  --ink: 245 244 242;
  --ink-muted: 168 162 158;
  --ink-dim: 120 113 108;

  --accent: 251 146 60;
  --accent-soft: 67 20 7;
  --accent-ink: 254 215 170;

  --positive: 74 222 128;
  --positive-soft: 5 46 22;
  --warning: 234 179 8;
  --warning-soft: 66 32 6;
  --critical: 248 113 113;
  --critical-soft: 69 10 10;
  --info: 34 211 238;
  --info-soft: 8 51 68;

  /* Motion scale — small, purposeful. */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

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

body {
  background-color: rgb(var(--bg));
  color: rgb(var(--ink));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--border-strong));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--ink-dim));
  border: 2px solid transparent;
  background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes amx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.amx-pulse {
  animation: amx-pulse 1.6s var(--ease-out) infinite;
}

@keyframes amx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.amx-skeleton {
  background-image: linear-gradient(
    90deg,
    rgb(var(--surface-subtle)) 0%,
    rgb(var(--border)) 50%,
    rgb(var(--surface-subtle)) 100%
  );
  background-size: 200% 100%;
  animation: amx-shimmer 1.6s linear infinite;
}
