/* Swarm event design system — base and shared components.
   Load order: fonts/fonts.css, tokens.css, base.css, then components/*.css. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--doc-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* A bare URL in prose breaks instead of pushing a phone page sideways. */
  overflow-wrap: break-word;
}

/* The signature move: headlines are regular weight. Bold marks emphasis words inside them. */
h1, h2, h3, .headline {
  font-weight: 400;
  color: var(--head);
  text-wrap: balance;
}

strong, b { font-weight: 700; }

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  /* --accent is 2.63:1 on light, under the 3:1 floor for a focus ring. */
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

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

code {
  font-size: .92em;
  overflow-wrap: anywhere;
}

.lead { color: var(--muted); }

/* ---------- shared components ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .11em;
  display: flex;
  align-items: center;
  gap: .9em;
  flex-wrap: wrap;
}

.pill {
  font-family: var(--mono);
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: 2em;
  padding: .15em .7em;
  white-space: nowrap;
}

/* Command block: the 2px orange rule is structure, not decoration. */
.codewrap {
  overflow-x: auto;
  background: var(--surface);
  border-left: 2px solid var(--accent);
}

.codewrap pre {
  margin: 0;
  padding: .85em 1.05em;
  line-height: 1.55;
  white-space: pre;
  color: var(--fg);
}

.codewrap pre code {
  font-size: 1em;
  overflow-wrap: normal;
}

/* Note card text stays --fg: --muted on the wash drops under 4.5:1 in dark. */
.note {
  display: flex;
  align-items: baseline;
  gap: .9em;
  background: var(--accent-wash);
  border-left: 2px solid var(--accent);
  padding: .7em 1.05em;
  color: var(--fg);
}

.note p { margin: 0; }

.note-mark {
  font-family: var(--mono);
  font-size: .86em;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-text);
  white-space: nowrap;
}

.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .3em .9em .45em 0;
  border-bottom: 1px solid var(--rule);
}

td {
  padding: .44em .9em .44em 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  overflow-wrap: anywhere;
}

ol.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: .55em;
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.1em;
  line-height: 1.42;
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: var(--mono);
  color: var(--accent-text);
}

/* One orange lockup on both themes. Set the width where it is used. */
.logo {
  display: block;
  aspect-ratio: 340 / 91;
  background: url("logo/swarm-lockup.webp") center / contain no-repeat;
}

/* QR codes keep a white quiet zone in every theme, or phones won't read them. */
.qr {
  display: block;
  image-rendering: pixelated;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}