/* ============================================================
   base.css — reset, typography primitives, buttons, helpers
   ============================================================ */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 0.7em 1.2em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 999;
  transition: top var(--dur) var(--ease-out-expo);
}
.skip-link:focus { top: 0; }

/* ---- Display / headings ---- */
.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-lg);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.kicker {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--coral);
  margin-bottom: 0.6em;
  display: inline-block;
  transform: rotate(-1.5deg);
}
.kicker--light { color: var(--sun); }

.ink-teal { color: var(--teal); }

.prose {
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--ink-soft);
}
.prose--light { color: oklch(92% 0.02 200 / 0.86); }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--coral);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.85em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out-quart); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--lg { font-size: var(--text-lg); padding: 0.95em 1.8em; }

.btn--order { --btn-bg: var(--coral); --btn-fg: oklch(98% 0.01 90); }
.btn--order:hover { background: var(--coral-hot); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--paper);
  box-shadow: inset 0 0 0 2px oklch(98% 0.01 90 / 0.7);
}
.btn--ghost:hover { background: oklch(98% 0.01 90 / 0.12); box-shadow: inset 0 0 0 2px var(--paper); }

.btn--ghost-light {
  --btn-bg: transparent; --btn-fg: var(--paper);
  box-shadow: inset 0 0 0 2px oklch(98% 0.01 90 / 0.5);
}
.btn--ghost-light:hover { background: oklch(98% 0.01 90 / 0.12); }

/* brand buttons recolour per section via --btn-bg override */
.btn--brand { --btn-bg: var(--brand-accent, var(--coral)); --btn-fg: var(--brand-btn-fg, var(--paper)); }
.btn--brand:hover { filter: brightness(1.06); }

/* ---- Layout helpers ---- */
.kicker, .display-xl, .prose { display: block; }