@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

/* Same selector as Pico's light theme, so these win by load order */
:root:not([data-theme='dark']),
[data-theme='light'] {
  --brand: #4f35e8;
  --brand-hover: #3b22c9;
  --ink: #14151f;
  --surface-alt: #f5f5f9;
  --pico-font-family: 'Poppins', system-ui, sans-serif;
  --pico-border-radius: 0.375rem;
  --pico-primary: var(--brand);
  --pico-primary-background: var(--brand);
  --pico-primary-border: var(--brand);
  --pico-primary-underline: rgb(79 53 232 / 0.5);
  --pico-primary-hover: var(--brand-hover);
  --pico-primary-hover-background: var(--brand-hover);
  --pico-primary-hover-border: var(--brand-hover);
  --pico-primary-focus: rgb(79 53 232 / 0.35);
  --pico-primary-inverse: #fff;
}

h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

/* Same selector as Pico's link states, so this wins by load order */
a:is([aria-current]:not([aria-current='false']), :hover, :active, :focus) {
  --pico-text-decoration: none;
}

img {
  height: auto;
  border-radius: var(--pico-border-radius);
}

.narrow {
  max-width: 32rem;
  margin-inline: auto;
}

small.error {
  color: var(--pico-del-color);
}