/*
 * Base layer: typography, focus, motion, containers.
 * Component primitives live in components.css.
 */

body {
  background: var(--nbd-page);
  color: var(--nbd-ink);
  font-family: var(--nbd-font);
  font-size: var(--nbd-text-base);
  line-height: var(--nbd-leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Headings are tight and compact — no oversized display type. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--nbd-ink);
  font-weight: 650;
  line-height: var(--nbd-leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--nbd-space-3);
  text-wrap: balance;
}

h1 { font-size: var(--nbd-text-3xl); }
h2 { font-size: var(--nbd-text-2xl); }
h3 { font-size: var(--nbd-text-xl); }
h4 { font-size: var(--nbd-text-lg); }
h5,
h6 { font-size: var(--nbd-text-base); }

/* Italic and cursive display text is prohibited by the design system.
 * <em> keeps its semantics but is rendered as weight, not slant. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.nbd-display em {
  font-style: normal;
  font-weight: 700;
}

p { margin: 0 0 var(--nbd-space-4); }

a {
  color: var(--nbd-red-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--nbd-red); }

/* Visible focus on every interactive element. Never remove without replacing. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--nbd-focus-ring);
  outline-offset: var(--nbd-focus-offset);
  border-radius: var(--nbd-radius-sm);
}

/* Skip link — visually hidden until focused. */
.nbd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--nbd-space-2) var(--nbd-space-4);
  background: var(--nbd-ink);
  color: var(--nbd-white);
  font-size: var(--nbd-text-sm);
  text-decoration: none;
}

.nbd-skip-link:focus {
  left: var(--nbd-space-3);
  top: var(--nbd-space-3);
  color: var(--nbd-white);
}

/* Screen-reader-only utility. */
.nbd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Containers */
.nbd-container {
  width: 100%;
  max-width: var(--nbd-container);
  margin-inline: auto;
  padding-inline: var(--nbd-space-4);
}

.nbd-container--narrow { max-width: var(--nbd-container-narrow); }

/* Mobile first. 360 / 768 / 1280 are the tested breakpoints. */
@media (min-width: 768px) {
  .nbd-container { padding-inline: var(--nbd-space-5); }
}

/* Respect reduced-motion. Not "shorter" — effectively off. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Forced-colors (Windows high contrast): let the OS palette win, but keep
 * borders present so structure does not collapse. */
@media (forced-colors: active) {
  .nbd-card,
  .nbd-btn,
  .nbd-badge {
    border: 1px solid CanvasText;
  }
}