/**
 * Base layer: reset + typography + native element defaults.
 * Tokens only — no raw values (dev-standards §5, enforced by Stylelint).
 */
@layer tokens, base, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /*
     * Native Elementor containers (mega-menu, flex-grow rows) compute
     * percentage widths against the containing block, and without this
     * cap a single overflowing descendant lets that basis cascade wider
     * than the viewport across the whole page. Found live 2026-09-18
     * rebuilding the header with native widgets — harmless, standard
     * containment regardless of which element overflows first.
     */
    overflow-x: hidden;
  }

  body {
    margin: 0;
    background: var(--nn-bg);
    color: var(--nn-text);
    font-family: var(--nn-font-sans);
    font-size: var(--nn-text-base);
    line-height: var(--nn-leading-body);
  }

  img, picture, svg, video { display: block; max-width: 100%; height: auto; }

  h1, h2, h3, h4 {
    margin: 0;
    font-weight: var(--nn-weight-heading);
    line-height: var(--nn-leading-heading);
    letter-spacing: var(--nn-tracking-heading);
  }
  /* Dedicated heading tokens (Design System v2 §10), not the generic
     xs..4xl scale — that scale is shared by non-heading UI (badges,
     buttons, alerts) whose sizing must stay independent of heading
     sizes. */
  h1 { font-size: var(--nn-text-h1); }
  h2 { font-size: var(--nn-text-h2); font-weight: var(--nn-weight-h2); }
  h3 { font-size: var(--nn-text-h3); font-weight: var(--nn-weight-h3); }
  h4 { font-size: var(--nn-text-h4); font-weight: var(--nn-weight-h3); }

  p { margin: 0; max-width: 68ch; }

  small, .nn-text-sm { font-size: var(--nn-text-sm); }
  .nn-text-xs { font-size: var(--nn-text-xs); }

  a {
    color: var(--nn-link);
    text-decoration: underline;
  }
  a:visited { color: var(--nn-link-visited); }

  code, kbd, pre, samp {
    font-family: var(--nn-font-mono);
    line-height: var(--nn-leading-mono);
  }

  /* Numeric outputs align as values change — tool-quality signal (§4) */
  .nn-tabular-nums { font-variant-numeric: tabular-nums; }

  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; padding: var(--nn-space-2) var(--nn-space-3); }

  button, input, select, textarea { font: inherit; color: inherit; }

  /* Visible focus everywhere (a11y-standards, frozen) */
  :focus-visible {
    outline: var(--nn-focus-ring-width) solid var(--nn-focus);
    outline-offset: var(--nn-focus-ring-offset);
  }

  ::selection { background: var(--nn-primary-subtle); color: var(--nn-text); }

  .nn-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Vertical rhythm utility (design-foundations §3): apply spacing between
     siblings via one rule instead of per-element margins. */
  .nn-flow > * + * { margin-top: var(--nn-flow); }
}