/* ============================================================
   Hawley Design System — foundation layer v1.0 (2026-07-21)
   Theme-INDEPENDENT structure: spacing, radii, container, motion,
   reset, a11y, and the shared layout helpers. No colour lives here
   (colour is the theme layer) and no type values live here (type is
   tokens.css). Import order per site:
       tokens.css  →  foundation.css  →  themes/<name>.css  →  components.css  →  site styles.css
   ============================================================ */

:root {
  /* ---- spacing scale (rem, 1.5× steps off 0.25rem) ----
     Structural rhythm. Pick a step; never a fresh px value. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- radii ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* ---- layout ---- */
  --container: 72rem;   /* wide default (marketing). A site may narrow this. */
  --measure-col: 48rem; /* reading column for text-first pages */
  --pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ---- section rhythm ---- */
  --section-y: clamp(3rem, 11vh, 6rem);

  /* ---- motion ---- */
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.1, 1);

  /* ---- elevation (theme layers may recolour the shadow tint) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.18);
  --shadow-3: 0 24px 80px rgba(0, 0, 0, 0.4);

  /* ---- z-index ladder ---- */
  --z-nav: 50;
  --z-float: 60;
  --z-skip: 100;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

/* ---- layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.wrap { width: 100%; max-width: var(--measure-col); margin-inline: auto; padding-inline: var(--pad); }
main > section, .section { padding-block: var(--section-y); }

/* ---- accessibility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-skip);
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-display); font-weight: var(--w-display); text-decoration: none;
}
.skip-link:focus { left: 0; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- reveal-on-scroll (opt-in; JS adds .is-visible) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}