/**
 * base.css — reset, typography defaults, and layout primitives.
 * Loaded after tokens.css, before components.css.
 */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-text-link);
}

a:hover {
  color: var(--color-text-link-hover);
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

/* Visible focus ring for every interactive element, keyboard or pointer. */
/* Spark's own focus ring, from interactions/focus. Two tone: the outline
   is the ring, and the box-shadow is a white one sitting in the offset gap
   outside it, so the ring survives a dark backdrop or a filled surface. A
   single blue outline was invisible on the sign-in page and on a code
   block; this is the reason Spark builds it in two parts. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-backup);
}

/* Elements focused by script only (tabindex="-1", e.g. a result heading
   focus moves to after an action) aren't controls — no ring. */
[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* ---- Layout primitives ---- */

.page-container {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-side-padding);
}

.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;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--color-text-ink);
  color: var(--color-text-on-brand);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--motion-duration-base) var(--motion-easing);
}

.skip-link:focus {
  top: var(--space-3);
}