/* ==========================================================================
   Aisle to Away — Design System (single source of truth)
   Referenced by every page. Do not redefine tokens in page-level <style>.
   ========================================================================== */

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

:root {
  /* ── Color primitives ── */
  --cream: #F4F1EC;
  --cream-warm: #F7F4EF;
  --ink: #1F1F1F;
  --ink-deep: #1A1917;
  --ink-deepest: #121210;
  --gold: #8c5c3c;
  --gold-light: #b8845e;
  --muted: #484848;
  --muted-soft: #6B6B6B;

  /* ── Typography families ── */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Satoshi', -apple-system, sans-serif;

  /* ── Semantic (light) ── */
  --background: var(--cream);
  --surface1: var(--cream-warm);
  --text1: var(--ink);
  --text2: var(--muted);
  --text3: var(--muted-soft);
  --text4: rgba(31, 31, 31, 0.35);
  --border: rgba(31, 31, 31, 0.06);
  --border-visible: rgba(31, 31, 31, 0.10);
  --border-input: rgba(31, 31, 31, 0.35);
  --accent: var(--gold);
  --accent-soft: var(--gold-light);
  --accent-subtle: rgba(140, 92, 60, 0.08);

  /* ── Semantic (dark sections) ── */
  --dark-bg: var(--ink-deep);
  --dark-bg-deep: var(--ink-deepest);
  --dark-text1: var(--cream);
  --dark-text2: rgba(255, 255, 255, 0.60);
  --dark-text3: rgba(255, 255, 255, 0.40);
  --dark-text4: rgba(255, 255, 255, 0.20);
  --dark-border: rgba(244, 241, 236, 0.06);

  /* ── Overlay cream (text-on-image) ── */
  --overlay-cream: #faf8f4;

  /* ── Typography scale ── */
  --fs-display: clamp(2.5rem, 5.5vw, 5rem);
  --fs-h1: clamp(2.2rem, 3.8vw, 3.8rem);
  --fs-h2: clamp(1.8rem, 2.8vw, 2.5rem);
  --fs-h3: 1.6rem;
  --fs-quote: clamp(1.4rem, 2.5vw, 2rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-label: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --ls-display: -0.03em;
  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-h3: -0.01em;
  --ls-label: 0.25em;
  --ls-eyebrow: 0.35em;
  --ls-caps: 0.12em;

  /* ── Spacing scale (use for new work; legacy px values may remain) ── */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-2xl: 64px;
  --sp-3xl: 80px;
  --sp-4xl: 112px;
  --sp-5xl: 140px;

  /* ── Motion ── */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur-normal: 600ms;
  --dur-slow: 1200ms;

  /* ── Hairline rules (gold) ── */
  --rule-short: 40px;
  --rule-standard: 96px;
  --rule-statement: 120px;
}

/* ── Global base ── */
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--background);
  color: var(--text1);
  font-family: var(--sans);
}

/* <picture> wraps <img> transparently — keep existing img CSS working. */
picture { display: contents; }

/* Grain overlay (shared) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Skip link + focus ring (shared) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.85rem;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Site-wide scroll progress hairline (auto-injected by /js/enhance.js) */
.a2a-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 10001;
  transform-origin: 0 50%;
  transition: width 120ms linear;
  pointer-events: none;
}

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