/* ==========================================================
   SPACE UI KIT — GLOBAL
========================================================== */

@import url("./variables.css");
@import url("./colors.css");
@import url("./icons.css");
@import url("./typography.css");
@import url("./spacing.css");
@import url("./radius.css");
@import url("./shadow.css");


/* ==========================================================
   RESET
========================================================== */

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


html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  background: var(--bg);
}


html {
  color-scheme: dark;
}


body {
  min-height: 100vh;

  overflow-x: hidden;

  color: var(--text);

  background:
    var(--bg);
}


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


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


button {
  border: 0;
}


a {
  color: inherit;
  text-decoration: none;
}


ul,
ol {
  margin: 0;
  padding: 0;

  list-style: none;
}


/* ==========================================================
   SELECTION
========================================================== */

::selection {
  color: var(--bg-deep);
  background: var(--primary);
}


/* ==========================================================
   FOCUS
========================================================== */

:focus-visible {
  outline: 2px solid var(--primary);

  outline-offset: 3px;

  box-shadow:
    0 0 0 4px rgba(57, 217, 255, 0.12);
}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


::-webkit-scrollbar-track {
  background: var(--bg-deep);
}


::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}


::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}


/* ==========================================================
   COMMON UTILITIES
========================================================== */

.ui-hidden {
  display: none !important;
}


.ui-uppercase {
  text-transform: uppercase;
}


.ui-muted {
  color: var(--text-muted);
}


.ui-primary {
  color: var(--primary);
}


.ui-center {
  display: flex;

  align-items: center;
  justify-content: center;
}