@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --surface: #fff;
  --elevated: #fff;
  --ink: #363636;
  --ink-soft: #646464;
  --divider: #e7e7e7;
  --accent: #ff6b4a;
  --accent-ink: #a83b22;
  --accent-soft: #fff0e8;
  --header-bg: rgba(255, 255, 255, .96);
  --solid: #363636;
  --on-solid: #fff;
  --panel: #f5f5f5;
  color-scheme: light;
}
body { font-family: Manrope, system-ui, sans-serif; }
h1, h2, h3 { font-weight: 800; }
header { background: var(--header-bg); border-bottom-color: transparent; }
.brand { font-weight: 800; letter-spacing: -.035em; }
.brand img { border-radius: 10px; }
.card, .plan, .callout, .guide-contents { border-radius: 20px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 5px;
}
footer { background: var(--panel); }

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #181818;
    --elevated: #242424;
    --ink: #f5f5f5;
    --ink-soft: #b8b8b8;
    --divider: #3b3b3b;
    --accent-ink: #ffab8b;
    --accent-soft: #392921;
    --header-bg: rgba(24, 24, 24, .96);
    --solid: #f5f5f5;
    --on-solid: #181818;
    --panel: #202020;
    color-scheme: dark;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}