/* =========================================================
   Michael Bach — Base styles (reset, typography, a11y)
   ========================================================= */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { margin: 0; padding-left: 1.25rem; }

/* Typography primitives ---------------------------------- */

.h-display,
.h-1, .h-2, .h-3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin: 0;
}

.h-display { font-size: var(--text-hero); letter-spacing: -0.03em; }
.h-1       { font-size: var(--text-5xl); }
.h-2       { font-size: var(--text-4xl); }
.h-3       { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }

.h-sub {
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coral);
  margin: 0 0 var(--space-3) 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-regular);
  max-width: 60ch;
}

.body { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.small { font-size: var(--text-sm); }
.mono-num { font-variant-numeric: tabular-nums; }

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }

/* Surfaces ----------------------------------------------- */

.surface-arsenic   { background: var(--color-arsenic);    color: var(--color-text-on-dark); }
.surface-lavender  { background: var(--color-lavender);   color: var(--color-text-on-dark); }
.surface-coral     { background: var(--color-coral);      color: var(--color-text-on-dark); }
.surface-tulip     { background: var(--color-tulip);      color: var(--color-arsenic); }
.surface-orange    { background: var(--color-orange);     color: var(--color-arsenic); }
.surface-timberwolf{ background: var(--color-timberwolf); color: var(--color-arsenic); }
.surface-white     { background: var(--color-white);      color: var(--color-arsenic); }
.surface-softer    { background: var(--color-timberwolf-t3); color: var(--color-arsenic); }

/* Focus visible — never removed -------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-on-light);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

.surface-arsenic :focus-visible,
.surface-lavender :focus-visible,
.surface-coral :focus-visible {
  outline-color: var(--color-coral);
}

/* On Coral background, Coral focus ring would vibrate — switch to white. */
.surface-coral :focus-visible { outline-color: var(--color-white); }

/* Skip link --------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-arsenic);
  color: var(--color-white);
  padding: 0.75rem 1rem;
  font-weight: var(--weight-bold);
  z-index: 1000;
  border-radius: var(--radius-sm);
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Selection --------------------------------------------- */

::selection { background: var(--color-coral); color: var(--color-white); }

/* Reduced-motion: kill all transitions/animations -------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Utility ----------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.divider {
  height: 1px;
  background: currentColor;
  opacity: 0.12;
  border: 0;
  margin: 0;
}