/* Reset + base typography + design floor. Stable across pages.
 *
 * Implements the goober-web-design baseline so even a minimal pass reads as
 * "designed": a fluid clamp() type scale (H1 caps at 56px, weight ≤700),
 * eyebrow/subheading utilities, a real button system, and a section rhythm.
 * BRAND values (colours, fonts, radius) come from tokens.css; STRUCTURE lives
 * here. Framework classes only — never inline styles. The goober-web-design
 * skill's rules override anything here.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* v2 type system: Figtree display, Quicksand reserved for the accent-word
   device only. This overrides tokens.css's --font-heading (Quicksand) here
   rather than in tokens.css itself, because stitch regenerates tokens.css
   from design-guide/tokens.json on every build and a hand-edit there would
   be silently lost. base.css loads after tokens.css, so the cascade holds. */
:root {
  --font-heading: 'Figtree', 'GT Walsheim', 'DM Sans', sans-serif;
  --font-accent: 'Quicksand', system-ui, -apple-system, sans-serif;
}

:root {
  /* Type rhythm */
  --lh-display: 1.06;
  --lh-heading: 1.16;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-display: -0.015em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.14em;

  /* Layout rhythm */
  --container-pad: clamp(1.25rem, 4vw, 2rem);
  --prose-max: 68ch;
  --section-pad: clamp(3.5rem, 7vw, 6rem);          /* ≈ py-16 → py-24 */
  --section-pad-sm: clamp(2.25rem, 4.5vw, 3.5rem);
  --section-pad-lg: clamp(5rem, 10vw, 8rem);
  --stack-gap: clamp(1.5rem, 3vw, 2rem);

  /* Interaction */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
  --btn-lift: 0 10px 24px -8px color-mix(in srgb, var(--color-ink) 45%, transparent);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;  /* flat 16px, v2 scale */
  color: var(--color-ink);
  background: var(--color-surface-tint);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Fluid type scale ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
h2 { font-size: clamp(2.1rem, 1.8rem + 1.6vw, 2.85rem); line-height: 1.12; }
h3 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); }
h4 { font-size: clamp(1.15rem, 1.06rem + 0.45vw, 1.375rem); line-height: var(--lh-snug); }
h5 { font-size: 1.1rem; line-height: var(--lh-snug); }
h6 { font-size: 0.95rem; line-height: var(--lh-snug); }

p { margin: 0 0 1em; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm, 6px);
}

/* ─── Text utilities ─── */
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--container-pad); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
}
.subheading, .lead {
  font-size: 1.125rem;  /* flat 18px, v2 scale */
  line-height: 1.55;
  color: var(--color-muted);
  font-weight: 400;
}
.prose { max-width: var(--prose-max); }

/* Font-size steps — the on-canvas A− / A+ text tool maps to these (never inline
   styles), so size tweaks stay on the type scale and remain overridable in CSS. */
.fs-sm  { font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem); }
.fs-md  { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); }
.fs-lg  { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); }
.fs-xl  { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.15; }
.fs-2xl { font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem); line-height: 1.1; }
.prose > * + * { margin-top: 1rem; }

/* ─── Button system: primary / secondary / ghost / accent(cta) + sizes ───
 * Every button is a styled framework component — never a browser default.
 * Hover lifts (transform), focus shows a ring, targets clear 44px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;                 /* 48px — comfortably ≥44px touch target */
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform .18s var(--ease-out),
    box-shadow .18s var(--ease-out),
    background-color .18s var(--ease-out),
    border-color .18s var(--ease-out),
    color .18s var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn--primary { background: var(--color-primary); color: var(--color-paper); border-color: var(--color-primary); }
.btn--primary:hover { box-shadow: var(--btn-lift); filter: brightness(1.06); }

.btn--accent, .btn--cta { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.btn--accent:hover, .btn--cta:hover { box-shadow: var(--btn-lift); filter: brightness(1.06); }

.btn--secondary { background: transparent; color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 42%, transparent); }
.btn--secondary:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: var(--color-primary); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: color-mix(in srgb, var(--color-ink) 18%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); border-color: color-mix(in srgb, var(--color-ink) 34%, transparent); }

.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.15rem; font-size: 0.9rem; }
.btn--lg { min-height: 3.5rem; padding: 1rem 2.25rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}