@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-variable.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --lilac: #eeebff;
  --cream: #fffdf8;
  --purple: #372986;
  --deep-purple: #201956;
  --ink: #2d2c4e;
  --muted: #595a78;
  --coral: #ff806b;
  --coral-hover: #ed6b57;
  --mint: #bee8d6;
  --peach: #f9e1d9;
  --success: #27644c;
  --warning: #83540b;
  --danger: #a63b4b;
  --background-page: var(--lilac);
  --background-surface: var(--cream);
  --background-subtle: color-mix(in srgb, var(--lilac) 76%, var(--cream));
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: color-mix(in srgb, var(--muted) 78%, var(--cream));
  --action-primary: var(--coral);
  --action-primary-text: var(--ink);
  --success-soft: color-mix(in srgb, var(--mint) 68%, var(--cream));
  --warning-soft: color-mix(in srgb, var(--coral) 16%, var(--cream));
  --danger-soft: color-mix(in srgb, var(--danger) 10%, var(--cream));
  --info-soft: color-mix(in srgb, var(--lilac) 70%, var(--cream));
  --border-subtle: color-mix(in srgb, var(--purple) 20%, var(--cream));
  --border-strong: color-mix(in srgb, var(--purple) 55%, var(--cream));
  --focus-ring: var(--purple);
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-small: 0.5rem;
  --radius-control: 0.75rem;
  --radius-card: 1.25rem;
  --radius-pill: 999rem;
  --motion-fast: 140ms ease;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  /* The wordmark keeps its brand lettering. */
  --font-brand: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-soft: 0 18px 55px
    color-mix(in srgb, var(--deep-purple) 12%, transparent);
  --shadow-action-color: color-mix(in srgb, var(--coral) 80%, var(--ink));
  --container: 74rem;
}

/* Layered so Tailwind utilities override these element defaults. */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
  }

  body {
    margin: 0;
    background: var(--background-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

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

  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }

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

/* Unlayered, so it also shortens the transitions that utilities set. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
  }
}

.ui-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.ui-window-dots i {
  width: 0.57rem;
  height: 0.57rem;
  border-radius: 50%;
  background: #ff605c;
}

.ui-window-dots i:nth-child(2) {
  background: #ffbd44;
}

.ui-window-dots i:nth-child(3) {
  background: #00ca4e;
}