/* ============================================================
   abg.css  —  A Better Gift shared design tokens
   Canonical token set approved 2026-05-16.

   Scope: governs <body>, the h1 / h2 heading scale, the
   .section-content reading-column width, and the .page-wrapper
   page frame.
   Page-specific component CSS (.hero, .card, .cta-section, etc.)
   stays in each page's own <style> block and is NOT affected.
   ============================================================ */

/* --- Body --- */
/* The tint behind the .page-wrapper sheet — creates the gray side gutters. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background: #f5f5f5;
}

/* --- Page frame --- */
/* The white "sheet" that holds page content, centered on the body. */
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* --- Headings (desktop) --- */
h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

h2 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* --- Canonical content width --- */
/* .section-content is the marketing pages' reading-column wrapper. */
.section-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Headings (mobile) --- */
/* 768px breakpoint matches the reference cluster. */
@media (max-width: 768px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
}
