/* Grace & Fire Publishing — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #fcfbf8; /* Soft White. Default page background; header and book-card surfaces. */
  --ivory: #f7f2e8; /* Warm Ivory. Alternating section bands (benefit rows, Inside the Book, lead-magnet blocks). Never darker than this for large fields. */
  --sand: #efe6d6; /* Addition (not in the brief): a deeper ivory for inputs' resting fill, hover on ivory cards, and the 3D-book floor shadow tint. */
  --hairline: #e2d7c4; /* Addition: 1px dividers between benefit columns, card borders, table rules on paper and ivory. */
  --ink: #202020; /* Deep Charcoal. Headlines and book titles on paper/ivory (14.6:1 on ivory). Also the dark band fill behind email signup and footer. */
  --ink-body: #303030; /* Body Charcoal. Body copy on paper, ivory and sand (≥10.6:1). */
  --ink-muted: #5f574c; /* Addition: captions, attributions, meta lines, placeholder text on paper/ivory (6.4:1 on ivory). */
  --copper: #b85c38; /* Burnished Copper. Primary CTA fill with white label (4.54:1 — AA). As text only at 24px+ (4.07:1 on ivory). One primary button per view. */
  --copper-deep: #9c4a2b; /* Addition: copper hover/pressed fill, and copper for small text links and eyebrows on paper/ivory (5.5:1). */
  --gold: #b79555; /* Muted Gold. Decorative only: ornamental rules, the diamond separator, icon accents, borders. Fails as text (2.5:1 on ivory) — never set words in it on light grounds. Readable as text on ink (5.8:1). */
  --gold-deep: #8a6a2e; /* Addition: gold when it must carry words — the Men collection's accent headline line and eyebrows on paper/ivory (4.5:1 on ivory, 4.85:1 on paper). */
  --burgundy: #6d2838; /* Deep Burgundy. Women collection accent: headline second line, icons, the email band. White text on it is 10.4:1. */
  --on-dark: #f7f2e8; /* Text on ink, burgundy and photo overlays (14.6:1 on ink). */
  --on-dark-muted: #cfc6b6; /* Addition: secondary text on ink (9.6:1). */
  --focus: #9c4a2b; /* Focus ring: 2px solid, 2px offset. 5.5:1 on ivory, ≥3:1 on every light ground; on ink bands use on-dark. */
  --success: #2f6b4f; /* Addition: form confirmation ("Check your inbox") text and icon, always with a word. 6.1:1 on paper. */
  --danger: #a3262b; /* Addition: form errors, always with an icon and message. 7.1:1 on paper. */
  --shadow-book: 0 2px 4px rgba(32,32,32,0.18), 12px 24px 40px rgba(32,32,32,0.28); /* 3D book mockups and flat covers standing on a surface. */
  --shadow-card: 0 1px 2px rgba(32,32,32,0.06), 0 8px 24px rgba(32,32,32,0.08); /* Book cards and lead-magnet panels on paper. Flat on ivory — use a hairline border instead. */
  --shadow-button: 0 2px 6px rgba(156,74,43,0.25); /* Primary copper button resting state. */
}
:root {
  --space-1: 4px; /* Icon-to-label gaps. */
  --space-2: 8px; /* Tight stacks: eyebrow to title. */
  --space-3: 12px; /* Button groups gap, form field gap. */
  --space-4: 16px; /* Mobile page gutter; card inner padding (small). */
  --space-5: 24px; /* Card padding; paragraph to button. */
  --space-6: 32px; /* Column gutter; desktop page gutter at 768–1199px. */
  --space-7: 48px; /* Between blocks inside a section. */
  --space-8: 64px; /* Section vertical padding on mobile. */
  --space-9: 96px; /* Section vertical padding on desktop. */
  --space-10: 128px; /* Hero top/bottom padding on desktop. */
  --content-max: 1200px; /* Max width of page content; text columns cap at 68ch. */
  --radius-xs: 2px; /* Inputs, book covers (a printed book is square-edged). */
  --radius-sm: 4px; /* Buttons, cards, photos. */
  --radius-pill: 999px; /* Only the header SHOP BOOKS button and filter chips. */
  --font-display: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
  --font-sans: "Inter", "Source Sans 3", system-ui, sans-serif;
  --text-book-title: 600 64px/0.98 var(--font-display); /* Book-page hero title, set uppercase, two colours split by line (ink + collection accent). 40px under 640px. */
  --text-display: 500 60px/1.02 var(--font-display); /* Homepage hero and page-level hero headlines, sentence case. 40px under 640px. */
  --text-h1: 600 46px/1.08 var(--font-display); /* Section headlines (About the Book, Featured Books). 34px mobile. */
  --text-h2: 600 34px/1.15 var(--font-display); /* Sub-section headlines, card-group titles. 28px mobile. */
  --text-h3: 600 24px/1.25 var(--font-display); /* Book-card titles, resource titles. */
  --text-subtitle: 500 26px/1.25 var(--font-display); /* Book subtitle under the hero title. 21px mobile. */
  --text-scripture: italic 500 20px/1.45 var(--font-display); /* Scripture and pull quotes; attribution below in eyebrow/ink-muted. */
  --text-eyebrow: 600 13px/1.3 var(--font-sans); /* Uppercase category labels and section kickers, in ink or copper-deep. */
  --text-lead: 400 19px/1.6 var(--font-sans); /* Hero supporting copy and section intros; max 60ch. */
  --text-body: 400 17px/1.65 var(--font-sans); /* All running copy; paragraphs of 2–4 sentences, max 68ch. */
  --text-small: 400 14px/1.5 var(--font-sans); /* Benefit descriptions, card meta, form help text, footer links. */
  --text-label: 700 13px/1.3 var(--font-sans); /* Benefit-row and Inside-the-Book titles, uppercase. */
  --text-button: 600 15px/1.2 var(--font-sans); /* Button labels, uppercase. */
}
.book-title {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.display {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}
.subtitle {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
}
.scripture {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
  font-style: italic;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.06em;
}