/* Global resets and base document styles. Component recipes live in *-classes.ts modules. */

* {
  box-sizing: border-box;
}

body {
  margin: var(--margin-none);
  color: var(--text-primary);
  min-height: var(--size-viewport-full);
  background:
    radial-gradient(var(--body-gradient-warm-size) at 8% -18%, var(--body-bg-warm), transparent 62%),
    radial-gradient(var(--body-gradient-cool-size) at 102% 6%, var(--body-bg-cool), transparent 62%),
    linear-gradient(var(--body-bg-base) 0%, var(--body-bg-mid) 44%, var(--body-bg-end) 100%);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

code,
pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

a {
  color: inherit;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-drop-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

button:focus-visible,
a:focus-visible {
  outline: var(--size-focus-ring) solid var(--action-focus-ring);
  outline-offset: var(--size-focus-offset);
}

.input-control::placeholder,
.textarea-control::placeholder,
.select-control::placeholder {
  color: var(--placeholder-text);
  opacity: 1;
}

.mono,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
