/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
/* Loads 2nd. Browser normalization only; depends on tokens.css for zero values here, but keep it right after tokens by convention. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--color-bg-primary);
  color-scheme: light;
}

html[data-theme="dark"] {
  background: oklch(12% 0.026 264);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-primary);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--transition-theme), color var(--transition-theme);
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

address {
  font-style: normal;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Native form controls are token-driven in dark mode. Hidden state controls
   (checkboxes/radios) are deliberately excluded because their visual UI is
   supplied by existing labels and component styles. */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border: 1px solid color-mix(in oklch, var(--color-glow), transparent 72%);
  caret-color: var(--color-glow);
  color-scheme: dark;
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] select:focus-visible {
  outline: 2px solid var(--color-glow);
  outline-offset: 2px;
  border-color: var(--color-glow);
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):user-invalid,
:root[data-theme="dark"] textarea:user-invalid,
:root[data-theme="dark"] select:user-invalid {
  border-color: oklch(68% 0.18 25);
  box-shadow: 0 0 0 3px oklch(68% 0.18 25 / 0.14);
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):user-valid,
:root[data-theme="dark"] textarea:user-valid,
:root[data-theme="dark"] select:user-valid {
  border-color: color-mix(in oklch, var(--color-highlight), transparent 22%);
}

:root[data-theme="dark"] select option {
  color: var(--color-text-primary);
  background: var(--color-bg-section);
}

:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-input) inset;
  caret-color: var(--color-glow);
  transition: background-color 9999s ease-out 0s;
}