:root {
  /* Colors */
  --color-primary: #056cf2;
  --color-primary-pale: hsl(
    from var(--color-primary) h calc(s - 40) calc(l + 45)
  );
  --color-primary-paler: hsl(
    from var(--color-primary) h calc(s - 40) calc(l + 50)
  );
  --color-primary-dark: hsl(from var(--color-primary) h s calc(l - 20));
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 30));
  --color-secondary: #daa0f2;
  --color-secondary-pale: hsl(
    from var(--color-secondary) h calc(s - 40) calc(l + 15)
  );
  --color-secondary-light: hsl(
    from var(--color-secondary) h calc(s - 40) calc(l + 5)
  );
  --color-secondary-dark: hsl(from var(--color-secondary) h s calc(l - 20));
  --color-accent: #88dff2;
  --color-accent-pale: hsl(
    from var(--color-accent) h calc(s - 40) calc(l + 15)
  );
  --color-accent-dark: hsl(from var(--color-accent) h s calc(l - 20));
  --color-success: #88f2a6;
  --color-success-pale: hsl(from var(--color-success) h s calc(l + 20));
  --color-success-dark: hsl(from var(--color-success) h s calc(l - 20));
  --color-warning: #f2eb88;
  --color-warning-pale: hsl(from var(--color-warning) h s calc(l + 23));
  --color-warning-dark: hsl(from var(--color-warning) h s calc(l - 20));
  --color-warning-darker: hsl(from var(--color-warning) h s calc(l - 40));
  --color-caution: #f2bd88;
  --color-caution-pale: hsl(from var(--color-caution) h s calc(l + 23));
  --color-caution-dark: hsl(from var(--color-caution) h s calc(l - 20));
  --color-caution-darker: hsl(from var(--color-caution) h s calc(l - 40));
  --color-danger: #f28d88;
  --color-danger-pale: hsl(from var(--color-danger) h s calc(l + 20));
  --color-danger-dark: hsl(from var(--color-danger) h s calc(l - 20));
  --color-grey: #d8e0f2;
  --color-grey-light: hsl(from var(--color-grey) h s calc(l + 6));
  --color-grey-dark: hsl(from var(--color-grey) h s calc(l - 20));
  --color-grey-darker: hsl(from var(--color-grey) h s calc(l - 30));
  --color-white: #fff;
  --color-black: #000;
  --color-foreground: var(--color-black);
  --color-background: var(--color-primary-paler);

  /* Fonts */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* containers */
  --container: 75rem;
  --container-narrow: 35rem;

  /* Spacers */
  --spacer: 1;
  --spacer-xs: calc(var(--spacer) * 1rem / 6);
  --spacer-s: calc(var(--spacer) * 1rem / 3);
  --spacer-m: calc(var(--spacer) * 1rem / 2);
  --spacer-ml: calc(var(--spacer) * 1rem * (2 / 3));
  --spacer-base: calc(var(--spacer) * 1rem);
  --spacer-l: calc(var(--spacer) * 1rem * 2);
  --spacer-xl: calc(var(--spacer) * 1rem * 3);
  --spacer-em-xs: calc(var(--spacer) * 1em / 6);
  --spacer-em-s: calc(var(--spacer) * 1em / 3);
  --spacer-em-m: calc(var(--spacer) * 1em / 2);
  --spacer-em-ml: calc(var(--spacer) * 1em * (2 / 3));
  --spacer-em-base: calc(var(--spacer) * 1em);
  --spacer-em-l: calc(var(--spacer) * 1em * 2);
  --spacer-em-xl: calc(var(--spacer) * 1em * 3);

  /* Type Scales */
  --type-scale-xxxl: clamp(2.566rem, 8.526cqi, 5.96rem);
  --type-scale-xxl: clamp(2.281rem, 7.049cqi, 4.768rem);
  --type-scale-xl: clamp(2.027rem, 5.842cqi, 3.815rem);
  --type-scale-h1: clamp(1.802rem, 4.854cqi, 3.052rem);
  --type-scale-h2: clamp(1.602rem, 4.043cqi, 2.441rem);
  --type-scale-h3: clamp(1.424rem, 3.377cqi, 1.953rem);
  --type-scale-h4: clamp(1.266rem, 2.829cqi, 1.563rem);
  --type-scale-h5: clamp(1.125rem, 2.375cqi, 1.25rem);
  --type-scale-h6: 1rem;
  --type-scale-base: 1em;
  --type-scale-s: 0.875rem;
  --type-scale-xs: 0.75rem;

  /* Generic */
  --radius: calc(var(--spacer) * 1em / 3);
  --radius-s: calc(var(--radius) / 2);
  --radius-l: calc(var(--radius) * 2);
  --shadow: 0 var(--spacer-xs) var(--spacer-m) #0002;
  --transition: 0.2s;

  accent-color: var(--color-primary);
}

/*

CSS Reset
Adapted from: https://piccalil.li/blog/a-more-modern-css-reset/

*/

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

/* Prevent font size inflation */
html {
  text-size-adjust: none;
  font-family: var(--font-primary);
  line-height: 1.5;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* Remove default margin in favour of better control in authored CSS */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ol,
ul,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a {
  text-decoration-skip-ink: auto;
  color: var(--color-primary);
  transition: all var(--transition);

  &:where(:hover, :focus-visible) {
    color: var(--color-primary-dark);
  }
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

svg {
  fill: currentcolor;
}

svg:not(:root) {
  overflow: hidden;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 5em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Accessibility ---------- */

/* Focus Highlights */
*:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

.screen-reader-text,
.srt {
  position: absolute;
  white-space: nowrap;
  clip-path: polygon(0 0, 0.1% 0, 0.1% 0.1%, 0 0.1%);
  width: 1px;
  height: 1px;
}

h1,
.type-scale-h1 {
  font-size: var(--type-scale-h1);
}

h2,
.type-scale-h2 {
  font-size: var(--type-scale-h2);
}

h3,
.type-scale-h3 {
  font-size: var(--type-scale-h3);
}

h4,
.type-scale-h4 {
  font-size: var(--type-scale-h4);
}

h5,
.type-scale-h5 {
  font-size: var(--type-scale-h5);
}

h6,
.type-scale-h6 {
  font-size: var(--type-scale-h6);
}

body {
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}