/* ==========================================================================
   base.css — reset, document defaults, selection
   ========================================================================== */

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

a {
  text-decoration: none;
  color: inherit;
}

html {
  color-scheme: dark;
}

[data-theme="light"] html,
html[data-theme="light"] {
  color-scheme: light;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
    Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* THE smooth theme transition.
     This animates the body background + text colour. Every other colour-changing
     element declares its own transition in components.css so the whole page
     cross-fades together. We NEVER disable this transition in JS. */
  transition:
    background-color var(--theme-duration) var(--theme-easing),
    color var(--theme-duration) var(--theme-easing);
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}