/* A short reset. Everything it sets is something the system would otherwise
   have to override in every component.

   The rem values used for this documentation site's own chrome (measure,
   content width, sidebar width, header height) belong to this site, not to
   the design system it documents — the source design system defines no
   container-width tokens at all, so there is nothing under `--gl-*` to reach
   for here. See the header comment in site/shell.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(3.5rem + var(--gl-space-s));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--gl-color-surface-page);
  color: var(--gl-color-text-primary);
  font-family: var(--gl-font-sans);
  font-size: var(--gl-step-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

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

hr {
  height: 1px;
  margin: var(--gl-space-l) 0;
  border: 0;
  background: var(--gl-color-border-hairline);
}

/* One focus ring, defined once. No component is allowed its own. */
:focus-visible {
  outline: 2px solid var(--gl-color-accent);
  outline-offset: 2px;
  border-radius: var(--gl-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

.gl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Every rule here reads a type token for family and size. Weight, line-height,
   and letter-spacing are hardcoded to the exact numbers the source ships —
   there is no `--gl-weight-*` / `--gl-leading-*` / `--gl-tracking-*` scale in
   the real system, only eight fixed compound styles (see the Typography
   foundation page, which this file implements verbatim). */

.type-display { font: 600 var(--gl-step-4)/1.08 var(--gl-font-sans); letter-spacing: -0.015em; }
.type-h1, h1 { font: 600 var(--gl-step-3)/1.12 var(--gl-font-sans); letter-spacing: -0.012em; }
.type-h2, h2 { font: 600 var(--gl-step-2)/1.16 var(--gl-font-sans); letter-spacing: -0.01em; }
.type-h3, h3 { font: 600 var(--gl-step-1)/1.25 var(--gl-font-sans); }
.type-body    { font: 400 var(--gl-step-0)/1.55 var(--gl-font-sans); }
.type-body-sm { font: 400 var(--gl-step--1)/1.5 var(--gl-font-sans); }
.type-label {
  font: 500 var(--gl-step--2)/1 var(--gl-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gl-color-text-secondary);
}
.type-mono { font: 400 var(--gl-step--1)/1.5 var(--gl-font-mono); }

/* Prose defaults for the documentation body copy. These read the same
   tokens the compound classes above do; they are not a second scale. */
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }

h4 { font: 600 var(--gl-step-0)/1.3 var(--gl-font-sans); }

p, ul, ol { margin: 0 0 var(--gl-space-s); }
li + li { margin-top: var(--gl-space-3xs); }

a {
  color: var(--gl-color-accent);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--gl-dur-fast) var(--gl-ease),
              text-decoration-color var(--gl-dur-fast) var(--gl-ease);
}
a:hover {
  color: var(--gl-color-accent-ink);
  text-decoration-color: currentColor;
}

strong, b { font-weight: 600; }

small { font-size: var(--gl-step--1); }

.gl-lead {
  font-size: var(--gl-step-1);
  line-height: 1.5;
  color: var(--gl-color-text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}

.gl-muted { color: var(--gl-color-text-secondary); }
.gl-subtle { color: var(--gl-color-text-tertiary); }

code, kbd, samp, pre {
  font-family: var(--gl-font-mono);
  font-feature-settings: "liga" 0;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  background: var(--gl-color-surface-fill);
  border: 1px solid var(--gl-color-border-hairline);
  border-radius: var(--gl-radius-sm);
  white-space: nowrap;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-size: var(--gl-step--2);
  line-height: 1.6;
  background: var(--gl-color-surface-card);
  border: 1px solid var(--gl-color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--gl-radius-sm);
  color: var(--gl-color-text-secondary);
}

blockquote {
  margin-block: var(--gl-space-s);
  padding-left: var(--gl-space-s);
  border-left: 2px solid var(--gl-color-accent);
  color: var(--gl-color-text-secondary);
}