@import url("./reset.css");
@import url("./colors.css");

@font-face {
  font-family: "Martian Mono";
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url(./MartianMono-1.0.0.woff2) format("woff2");
  font-display: swap;
}

:root {
  --radius: 12px;
  --opacity-pattern:
    repeating-conic-gradient(var(--chess) 0% 25%, var(--surface-1) 0% 50%)
    50% / 8px 8px;
  --unavailable-border: 1px dashed oklch(0.6 0.05 310 / 40%);
}

body,
kbd,
button {
  font-family: "Martian Mono", monospace;
  font-size: 15px;
  font-stretch: 112.5%;
}

body {
  --current-surface: var(--surface-0);

  line-height: 16px;
  color: var(--text-primary);
  background: var(--current-surface);
  -webkit-tap-highlight-color: oklch(0 0 0 / 0%);
}

a,
input,
button,
select {
  &:focus {
    outline: var(--accent) solid 3px;
  }

  &:not(:focus-visible):focus {
    outline: none;
  }
}

::selection {
  color: var(--selection-text);
  background: var(--accent);
}

body.is-loading * {
  &, &::before, &::after {
    transition: none !important;
    animation-duration: 0.001s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
