/* ============================================================================
   Lukes Werks — Base (reset + elements + layout primitives)
   Load order: tokens.css -> base.css -> components.css
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li { text-wrap: pretty; }
p { max-width: var(--measure); }

a { color: inherit; text-decoration-color: var(--hairline-brass); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }

strong { font-weight: 650; }

ul, ol { padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-xl) 0; }

::selection { background: var(--brass-300); color: var(--ink-900); }

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

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }

.stack > * + * { margin-top: var(--flow, var(--space-md)); }
.stack--lg { --flow: var(--space-lg); }

/* Skip link for a11y */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: var(--bone-100);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* Utility */
.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;
}
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.measure { max-width: var(--measure); }

/* Inverse (dark) regions */
.inverse {
  background: var(--bg-inverse);
  color: var(--text-on-dark);
}
.inverse h1, .inverse h2, .inverse h3, .inverse h4 { color: var(--bone-50); }
.inverse a { text-decoration-color: var(--hairline-dark); }
.inverse .muted { color: var(--text-on-dark-muted); }