@import url("./tokens.css") layer(tokens);

@layer reset, tokens, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  img, video, canvas { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; }
}

@layer base {
  html { color-scheme: dark; }
  body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
  }
  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }
  h1 { font-size: var(--fs-xl); margin: 0 0 var(--s-4); }
  h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-3); }
  .skip-link {
    position: absolute; left: var(--s-3); top: -4rem;
    background: var(--accent); color: var(--on-accent); padding: var(--s-2) var(--s-3);
    border-radius: var(--r-1);
  }
  .skip-link:focus { top: var(--s-3); }
  .app-header {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
  }
  .app-nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
  .app-nav a {
    min-height: var(--tap); display: inline-flex; align-items: center;
    padding: 0 var(--s-3); text-decoration: none; color: var(--text-2);
    border-radius: var(--r-2);
  }
  .app-nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); }
  main { padding: var(--s-5); max-width: 1200px; margin: 0 auto; }
  .error-page { padding: var(--s-8); text-align: center; }
}

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