@font-face {
  font-family: "Kutup Mono";
  src: local("IBM Plex Mono"), local("JetBrains Mono"), local("Fira Code");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surface */
  --bg-0:        #0d1520;
  --bg-1:        #111d2c;
  --panel:       #16222f;
  --panel-soft:  #1a2839;
  --panel-raise: #1e2e3f;

  /* Text */
  --text-0: #dce8f5;
  --text-1: #aec4d8;
  --text-2: #6e8da6;

  /* Borders */
  --line:        rgba(110, 141, 166, 0.18);
  --line-strong: rgba(110, 141, 166, 0.32);

  /* Accent — electric blue */
  --accent:      #4fa8e8;
  --accent-dim:  rgba(79, 168, 232, 0.16);
  --accent-glow: rgba(79, 168, 232, 0.30);

  /* Semantic */
  --good: #2dd4a0;
  --warn: #f4b74a;
  --bad:  #ff7a85;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Sora", "Manrope", "Avenir Next", system-ui, sans-serif;
  color: var(--text-0);
  background: var(--bg-0);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  scrollbar-color: var(--line-strong) var(--panel);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: var(--panel); }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

.mono {
  font-family: "Kutup Mono", "IBM Plex Mono", "JetBrains Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}