:root {
  color-scheme: dark;

  --sticky-nav-clearance: 5rem;

  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --leading-body: 1.5;
  --leading-heading: 1.2;

  --motion-fast: 120ms;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);

  --color-bg: #14291b;
  --color-surface: #1d3a27;
  --color-surface-raised: #224330;
  --color-accent: #63a87b;
  --color-on-accent: var(--color-bg);
  --color-border: #54976a;
  --color-border-strong: var(--color-accent);
  --color-border-hover: #7fc494;
  --color-field-bg: var(--color-bg);
  --color-focus: #a8e6bd;
  --color-text: #e6efe7;
  --color-text-muted: #a9c0b0;
  --color-error: #f2938a;
  --color-success: #6fd89b;
  --color-badge-bg: #eaf2ea;
  --color-badge-text: #1a6b41;
}

html {
  scroll-padding-top: var(--sticky-nav-clearance);
}

body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  line-height: var(--leading-body);
}

h1,
h2,
h3 {
  line-height: var(--leading-heading);
}

.noscript {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
button {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-field-bg);
  color: var(--color-text);
  font-family: inherit;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover,
button:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}

::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-border-hover);
}

button {
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  input,
  textarea,
  select,
  button,
  .badge {
    transition:
      border-color var(--motion-fast) ease,
      background-color var(--motion-fast) ease,
      color var(--motion-fast) ease,
      opacity var(--motion-fast) ease;
  }
}