*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-m);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3, .brand, .dialog-title { font-family: var(--font-display); }

a { color: var(--accent); text-decoration: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-pop);
  z-index: 10;
}
.skip:focus { top: var(--space-4); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.button:active { transform: scale(0.98); }
.button-large { min-height: 46px; padding: 0 var(--space-5); font-size: var(--text-l); }
.button-primary { background: var(--sun); color: var(--on-sun); font-weight: 600; box-shadow: var(--sun-glow); }
.button-primary:hover { filter: brightness(1.05); }
.button-secondary { background: var(--hover); color: var(--text); }
.button-secondary:hover { background: var(--line); }
.button-plain { background: transparent; color: var(--text); padding: 0 var(--space-3); }
.button-plain:hover { background: var(--hover); }

.field-label { font-size: var(--text-s); font-weight: 500; color: var(--text-2); }

.field {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }

.dev-banner {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: #f5c542;
  color: #2b2100;
  font-size: var(--text-s);
  font-weight: 600;
  z-index: 20;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .field { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}