/* Design system — base styles
 * Reset, body, headings, links, code, lists, tables, focus, skip link.
 * Imports tokens. Subdomains receive design-system assets under /_ds/ at build time.
 */
@import "./tokens/color.css";
@import "./tokens/type.css";
@import "./tokens/space.css";
@import "./tokens/motion.css";
@import "./tokens/breakpoints.css";

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, pre, hr {
  margin: 0;
}
ul, ol { padding-inline-start: var(--space-5); }

/* Document */
html {
  color-scheme: dark;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  min-block-size: 100vh;
  font-size: var(--size-1);
}

/* Headings — one h1 per page; logical step-down */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
}
h1 { font-size: var(--size-7); }
h2 { font-size: var(--size-6); }
h3 { font-size: var(--size-5); }
h4 { font-size: var(--size-4); }
h5 { font-size: var(--size-3); }
h6 { font-size: var(--size-2); }

/* Body text + flow spacing */
p { color: var(--fg-0); max-inline-size: var(--measure-prose); }
small { font-size: var(--size-0); color: var(--fg-1); }
strong { font-weight: var(--weight-semibold); color: var(--fg-0); }
em { font-style: italic; }

/* Links — color + underline (color is never the only signal) */
a {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--focus); }
a:visited { color: var(--info); }

/* Focus ring — consistent across the system */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-2);
}

/* Selection */
::selection { background: var(--info-bg); color: var(--fg-0); }

/* Lists */
li + li { margin-block-start: var(--space-1); }

/* Inline code + blocks (component-level styling in components/code.css) */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* Tables */
table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--size-1);
}
th, td {
  text-align: start;
  padding: var(--space-3);
  border-block-end: 1px solid var(--line-0);
}
th { color: var(--fg-1); font-weight: var(--weight-semibold); }

/* HR */
hr {
  border: 0;
  border-block-start: 1px solid var(--line-0);
  margin-block: var(--space-6);
}

/* Images — responsive by default */
img, svg, video { max-inline-size: 100%; block-size: auto; display: block; }

/* Quote */
blockquote {
  border-inline-start: 3px solid var(--line-1);
  padding-inline-start: var(--space-4);
  color: var(--fg-1);
  margin-block: var(--space-4);
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  inset-block-start: var(--space-2);
  background: var(--bg-2);
  color: var(--fg-0);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-standard);
  z-index: 1000;
}
.skip-link:focus-visible { transform: translateY(0); }

/* Page container helpers */
.container {
  inline-size: min(100% - 2 * var(--space-5), var(--measure-wide));
  margin-inline: auto;
}
.prose {
  inline-size: min(100% - 2 * var(--space-5), var(--measure-prose));
  margin-inline: auto;
}
.prose > * + * { margin-block-start: var(--space-4); }
.prose > h2 { margin-block-start: var(--space-7); }
.prose > h3 { margin-block-start: var(--space-6); }

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