/* ============================================================
   BASE — global.css
   Element-level defaults that build on the reset.
   Uses tokens only — no hardcoded values.
   ============================================================ */

/* ── Root / HTML ─────────────────────────────────────────── */

html {
    font-size: 100%; /* respect user browser preference */
    scroll-behavior: smooth;
}

/* ── Body ────────────────────────────────────────────────── */

body {
    font-family: var(--font-base);
    font-size: var(--step-0);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-surface-base);

    /* Sticky footer — header and footer take natural height,
     main stretches to fill remaining space */
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;

    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* ── Headings ────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-block: 0;
}

h1 {
    font-size: var(--step-5);
}
h2 {
    font-size: var(--step-4);
}
h3 {
    font-size: var(--step-3);
}
h4 {
    font-size: var(--step-2);
}
h5 {
    font-size: var(--step-1);
}
h6 {
    font-size: var(--step-0);
}

/* ── Prose elements ──────────────────────────────────────── */

p {
    max-width: var(--measure);
}

/* Remove max-width for p inside utility classes that manage width */
.flow p,
[data-layout] p {
    max-width: unset;
}

blockquote {
    padding-inline-start: var(--space-m);
    border-inline-start: 4px solid var(--color-brand);
    color: var(--color-text-muted);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
}

/* ── Links ───────────────────────────────────────────────── */

a {
    color: var(--color-link);
    text-underline-offset: 0.2em;
    transition: color 0.15s ease;
}

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

a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Description lists ───────────────────────────────────── */

dl {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  gap: var(--space-2xs) var(--space-s);
  margin: 0;
}

dt {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

dd {
  margin-inline-start: 0;
}

/* ── Lists ───────────────────────────────────────────────── */

ul,
ol {
    padding-inline-start: var(--space-m);
}

/* ── Code ────────────────────────────────────────────────── */

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

code:not(pre code) {
    background-color: var(--color-surface-raised);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

pre {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-m);
    overflow-x: auto;
}

pre code {
    font-size: var(--step--1);
    background: none;
    border: none;
    padding: 0;
}

/* ── Horizontal Rule ─────────────────────────────────────── */

hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-l);
}

/* ── Tables ──────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--step--1);
}

th,
td {
    padding: var(--space-xs) var(--space-s);
    text-align: start;
    border-block-end: 1px solid var(--color-border);
}

th {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ── Main content ────────────────────────────────────────── */

main {
    padding-block: var(--space-l);
}

/* ── Focus visible — global ──────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

/* ── Selection ───────────────────────────────────────────── */

::selection {
    background-color: oklch(from var(--color-brand) l c h / 0.25);
    color: var(--color-text);
}