:root {
  --shi-color-purple: #582c83;
  --shi-color-midnight: #201545;
  --shi-color-white: #fff;
  --shi-color-black: #000;
  --shi-color-blue: #aadeeb;
  --shi-color-red: #e3322b;
  --shi-color-yellow: #f2be1a;
  --shi-color-green: #669933;
  --shi-color-gray: #54585a;
  --shi-color-near-white: #f2f2f2;

  --shi-color--on-purple: #fff;
  --shi-color--on-midnight: #fff;
  --shi-color--on-blue: #000;
  --shi-color--on-red: #fff;
  --shi-color--on-yellow: #000;
  --shi-color--on-green: #fff;

  --shi-adaptive-color--purple: light-dark(var(--shi-color-purple), oklch(from var(--shi-color-purple) calc(l + 0.48) calc(c - 0.08) h));
  --shi-adaptive-color--on-purple: light-dark(var(--shi-color--on-purple), #000);

  --shi-divider-color: light-dark(#d8d8d8, #424242);

  --shi-surface-background-color: light-dark(#fff, #212121);
  --shi-surface-color: light-dark(#000, #e0e0e0);

  --shi-navbar-background-color: var(--shi-surface-background-color);

  --shi-navlist-color: var(--shi-surface-color);
  --shi-navbar-color--current: var(--shi-adaptive-color--purple);
  --shi-navbar-color--hover: var(--shi-navbar-color--current);
  --shi-navbar-color--current--hover: light-dark(
    oklch(from var(--shi-color-purple) calc(l + 0.1) c h),
    oklch(from var(--shi-color-purple) calc(l + 0.56) calc(c - 0.08) h)
  );
  --shi-navbar-color--active: light-dark(var(--shi-color-midnight), oklch(from var(--shi-color-purple) calc(l + 0.36) calc(c - 0.08) h));

  --shi-transition-120ms: 120ms;
  --shi-transition-150ms: 150ms;
  --shi-transition-200ms: 200ms;
  --shi-transition-250ms: 250ms;
  --shi-transition-2s: 2s;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --shi-transition-120ms: 0ms;
    --shi-transition-150ms: 0ms;
    --shi-transition-200ms: 0ms;
    --shi-transition-250ms: 0ms;
    --shi-transition-2s: 0s;
  }
}

@font-face {
  font-family: 'Epilogue';
  src: url('/files/fonts/Epilogue-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}