/* ── Base Layout ──────────────────────────────────────────────────────────── */
/* Foundational page structure: color-scheme, body flex, accent bar, content  */
/* wrapper, and the global reduced-motion override.                            */

html { color-scheme: dark; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Teal accent bar ── */
.accent-bar-top {
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-deep));
}

/* ── Page content wrapper ── */
/* Flex column so a page can let its content grow (flex:1) and center vertically
   while the footer stays pinned below. */
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    /* Overrides tokens.css's html smooth scroll, so behavior:"auto" scrolls jump */
    scroll-behavior: auto !important;
  }
}