/* ==========================================================================
   theme.css — site-wide theme: border/glow variables, page background,
   scrollbar, focus ring, selection colour and the grid background pattern.
   ========================================================================== */
:root {
  --ci-border-subtle: #afcbeb24;
  --ci-border-active: #20d6d199;
  --ci-glow-cyan: #20d6d11f;
  --ci-glow-blue: #4d8dff1a;
}
html,
body,
#app {
  height: 100%;
}
body {
  color: #f5f8fc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0b1628;
  font-family: Inter, sans-serif;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #07111f;
}
::-webkit-scrollbar-thumb {
  background: #1a3050;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #20d6d1;
}
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline-offset: 2px;
  border-radius: 4px;
  outline: 2px solid #20d6d1;
}
::selection {
  background: #20d6d133;
}
.bg-grid-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23A9B8CC' stroke-width='0.25' stroke-opacity='0.1'/%3E%3C/svg%3E");
}