/*
  XTINT shared design foundation
  Load this before every page-specific stylesheet.
*/

:root {
  --ink: #080a08;
  --ink-2: #0e110e;
  --panel: rgba(19, 23, 19, .25);
  --panel-solid: #141814;
  --panel-grad: linear-gradient(180deg, #101310, #0c0f0c);
  --line: rgba(193, 244, 92, .14);
  --green: #C1F45C;
  --green-bright: #D8FF73;
  --green-deep: #8BCB3A;
  --grey: #969791;
  --grey-dim: #5d605b;
  --white: #F3F6EE;
  --plate: #FBDD00;
  --shadow-green: 0 0 50px rgba(193, 244, 92, .35);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: 'Sora', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.disp {
  font-family: 'Saira', sans-serif;
}

.cond {
  font-family: 'Saira Condensed', sans-serif;
}

a {
  color: inherit;
}

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

.green {
  color: var(--green);
}

/* Shared accessibility baseline */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}