/* =====================================================
   Armada Next — base reset & element foundations
   The classic UI loads MudBlazor + Bootstrap globally, so every
   reset/element rule here is fenced to `.armada-next`: the root
   carries the body-level styling, and the element resets live in
   an @scope block so they can neither escape to the classic UI
   nor be overridden by Bootstrap inside the new UI.
   ===================================================== */

/* body-level styling applied to the scope root, NOT the global body */
.armada-next {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@scope (.armada-next) {
  *, *::before, *::after { box-sizing: border-box; }

  h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-semibold); }
  p { margin: 0; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  button { font-family: inherit; }

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

  /* tabular numerals helper */
  .num, .mono { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

  /* ── BLUEPRINT GRID GROUND ─────────────────────────────────────
     Opt-in lattice backdrop. Add class "armada-grid" to any
     full-bleed container for the engineering-paper feel. */
  .armada-grid { position: relative; }
  .armada-grid::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-pitch) var(--grid-pitch);
    pointer-events: none;
    z-index: 0;
  }
  .armada-grid > * { position: relative; z-index: 1; }

  /* scrollbars stay quiet in dark */
  [data-mode="dark"] *::-webkit-scrollbar-thumb,
  .theme-dark *::-webkit-scrollbar-thumb {
    background: oklch(0.4 0.014 230);
    background-clip: content-box;
    border: 2px solid transparent;
  }
}