html:root {
  --bg: #f6f8f9;
  --surface: #fff;
  --fg: #273546;
  --muted: #596779;
  --charcoal: #465567;
  --border: #d4e0e6;
  --border-light: #e5eef2;
  --slushie-100: #eaf8fc;
  --slushie-300: #d0f1fa;
  --slushie-500: #83dceb;
  --slushie-800: #006982;
  --blueberry-300: #bdeaf4;
  --blueberry-800: #006a85;
  --blueberry-900: #25384a;
  --brand-cyan: #00a9d4;
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
}

body .nav {
  background: #f6f8f9f5;
}

body .journal-brand img {
  display: block;
  width: auto;
  height: 2rem;
}

body .btn.btn-primary {
  background: var(--blueberry-800);
  color: var(--surface);
}

body .btn.btn-primary:hover {
  background: var(--blueberry-900);
  color: var(--surface);
}

body :is(.btn-primary, .btn-secondary).btn:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

:focus-visible {
  outline: 2px solid var(--blueberry-800);
  outline-offset: 4px;
}

h1, h2 { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  html:root { scroll-behavior: auto; }
  body :is(.btn-primary, .btn-secondary).btn:hover { transform: none; }
}