@import '~normalize.css';

:root {
  --sans: 'Inter', sans-serif;
  --mono: "Operator Mono", "Fira Code", "SF Mono", "Roboto Mono", Menlo, monospace;
  --base: #449bf8;
  --black: #000;
  --black05: rgba(0, 0, 0, .05);
  --black10: rgba(0, 0, 0, .1);
  --black20: rgba(0, 0, 0, .2);
  --black025: rgba(0, 0, 0, .025);
  --black30: rgba(0, 0, 0, .3);
  --black40: rgba(0, 0, 0, .4);
  --black50: rgba(0, 0, 0, .5);
  --black60: rgba(0, 0, 0, .6);
  --black70: rgba(0, 0, 0, .7);
  --black80: rgba(0, 0, 0, .8);
  --black90: rgba(0, 0, 0, .9);
  --black0125: rgba(0, 0, 0, .0125);
  --blue: #339af0;
  --blue0: #e7f5ff;
  --blue1: #d0ebff;
  --blue2: #a5d8ff;
  --blue3: #74c0fc;
  --blue4: #4dabf7;
  --blue5: #339af0;
  --blue6: #228be6;
  --blue7: #1c7ed6;
  --blue8: #1971c2;
  --blue9: #1864ab;
  --border: rgba(0, 0, 0, .035);
  --cyan: #22b8cf;
  --cyan0: #e3fafc;
  --cyan1: #c5f6fa;
  --cyan2: #99e9f2;
  --cyan3: #66d9e8;
  --cyan4: #3bc9db;
  --cyan5: #22b8cf;
  --cyan6: #15aabf;
  --cyan7: #1098ad;
  --cyan8: #0c8599;
  --cyan9: #0b7285;
  --fuschia: #fb89f9;
  --fuschia0: #fff7ff;
  --fuschia1: #fee6fe;
  --fuschia2: #fdd4fd;
  --fuschia3: #fdbffc;
  --fuschia4: #fca6fa;
  --fuschia5: #fb89f9;
  --fuschia6: #f95ff6;
  --fuschia7: #e23edf;
  --fuschia8: #b331b1;
  --fuschia9: #6a1d69;
  --grape0: #f8f0fc;
  --grape1: #f3d9fa;
  --grape2: #eebefa;
  --grape3: #e599f7;
  --grape4: #da77f2;
  --grape5: #cc5de8;
  --grape: #cc5de8;
  --grape6: #be4bdb;
  --grape7: #ae3ec9;
  --grape8: #9c36b5;
  --grape9: #862e9c;
  --gray: #adb5bd;
  --gray0: #f8f9fa;
  --gray1: #f1f3f5;
  --gray2: #e9ecef;
  --gray3: #dee2e6;
  --gray4: #ced4da;
  --gray5: #adb5bd;
  --gray6: #868e96;
  --gray7: #495057;
  --gray8: #343a40;
  --gray9: #212529;
  --green: #51cf66;
  --green0: #ebfbee;
  --green1: #d3f9d8;
  --green2: #b2f2bb;
  --green3: #8ce99a;
  --green4: #69db7c;
  --green5: #51cf66;
  --green6: #40c057;
  --green7: #37b24d;
  --green8: #2f9e44;
  --green9: #2b8a3e;
  --indigo: #5c7cfa;
  --indigo0: #edf2ff;
  --indigo1: #dbe4ff;
  --indigo2: #bac8ff;
  --indigo3: #91a7ff;
  --indigo4: #748ffc;
  --indigo5: #5c7cfa;
  --indigo6: #4c6ef5;
  --indigo7: #4263eb;
  --indigo8: #3b5bdb;
  --indigo9: #364fc7;
  --lime: #94d82d;
  --lime0: #f4fce3;
  --lime1: #e9fac8;
  --lime2: #d8f5a2;
  --lime3: #c0eb75;
  --lime4: #a9e34b;
  --lime5: #94d82d;
  --lime6: #82c91e;
  --lime7: #74b816;
  --lime8: #66a80f;
  --lime9: #5c940d;
  --link: #0473e4;
  --orange: #ff922b;
  --orange0: #fff4e6;
  --orange1: #ffe8cc;
  --orange2: #ffd8a8;
  --orange3: #ffc078;
  --orange4: #ffa94d;
  --orange5: #ff922b;
  --orange6: #fd7e14;
  --orange7: #f76707;
  --orange8: #e8590c;
  --orange9: #d9480f;
  --pink: #fb92c5;
  --pink0: #f06595;
  --pink1: #ffdeeb;
  --pink2: #fcc2d7;
  --pink3: #faa2c1;
  --pink4: #f783ac;
  --pink5: #f06595;
  --pink6: #e64980;
  --pink7: #d6336c;
  --pink8: #c2255c;
  --pink9: #a61e4d;
  --pinkest: rgb(246, 237, 250);
  --pinky: rgb(252, 250, 255);
  --primary: #313b53;
  --red: #ff6b6b;
  --red0: #fff5f5;
  --red1: #ffe3e3;
  --red2: #ffc9c9;
  --red3: #ffa8a8;
  --red4: #ff8787;
  --red5: #ff6b6b;
  --red6: #fa5252;
  --red7: #f03e3e;
  --red8: #e03131;
  --red9: #c92a2a;
  --secondary: #d92d6e;
  --teal: #20c997;
  --teal0: #e6fcf5;
  --teal1: #c3fae8;
  --teal2: #96f2d7;
  --teal3: #63e6be;
  --teal4: #38d9a9;
  --teal5: #20c997;
  --teal6: #12b886;
  --teal7: #0ca678;
  --teal8: #099268;
  --teal9: #087f5b;
  --violet: #845ef7;
  --violet0: #f3f0ff;
  --violet1: #e5dbff;
  --violet2: #d0bfff;
  --violet3: #b197fc;
  --violet4: #9775fa;
  --violet5: #845ef7;
  --violet6: #7950f2;
  --violet7: #7048e8;
  --violet8: #6741d9;
  --violet9: #5f3dc4;
  --white: #fff;
  --white05: rgba(255, 255, 255, .05);
  --white10: rgba(255, 255, 255, .1);
  --white20: rgba(255, 255, 255, .2);
  --white025: rgba(255, 255, 255, .025);
  --white30: rgba(255, 255, 255, .3);
  --white40: rgba(255, 255, 255, .4);
  --white50: rgba(255, 255, 255, .5);
  --white60: rgba(255, 255, 255, .6);
  --white70: rgba(255, 255, 255, .7);
  --white80: rgba(255, 255, 255, .8);
  --white90: rgba(255, 255, 255, .9);
  --white95: rgba(255, 255, 255, .95);
  --white0125: rgba(255, 255, 255, .0125);
  --yellow: #fcc419;
  --yellow0: #fff9db;
  --yellow1: #fff3bf;
  --yellow2: #ffec99;
  --yellow3: #ffe066;
  --yellow4: #ffd43b;
  --yellow5: #fcc419;
  --yellow6: #fab005;
  --yellow7: #f59f00;
  --yellow8: #f08c00;
  --yellow9: #e67700;
}

@media print {
  .hidden-print {
    display: none;
  }
}

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

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 80px;
}

::selection {
  background-color: #ffe079;
  color: #000;
}

a::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
img::selection,
code::selection,
span::selection,
b::selection {
  background-color: #ffc533;
}

input::placeholder,
select:invalid {
  color: rgba(0, 0, 0, 0.5);
}


body[data-theme="dark"] {
  background: var(--black);

  input::placeholder,
  select:invalid {
    color: rgba(255, 255, 255, 0.5);
  }
}

b {
  font-weight: 600;
}

/* Remove narrow on input datalists
   source: https://stackoverflow.com/a/20941546
*/
input::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
  width: 0;
}


/* Clear focus for accessibility */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

:root {
  --sh-class: var(--link);
  --sh-identifier: var(--link);
  --sh-sign: var(--gray9);
  --sh-property: var(--link);
  --sh-entity: var(--link);
  --sh-jsxliterals: var(--link);
  --sh-string: var(--gray9);
  --sh-keyword: var(--secondary);
  --sh-comment: var(--gray6);
}

:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}
