/* Grace Covenant Presbyterian Church — generated from tokens.json */
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Italic-Variable.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Italic-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
:root, [data-theme="light"] {
  --surface: #fbf8f1;
  --surface-raised: #ffffff;
  --surface-sunken: #f3ecdc;
  --line: #ddd3c0;
  --line-strong: #8a8170;
  --ink: #1c1b18;
  --ink-muted: #5d574c;
  --lapis: #24589c;
  --lapis-hover: #1b4680;
  --lapis-soft: #e4ecf7;
  --on-lapis: #ffffff;
  --lapis-deep: #163a6b;
  --on-lapis-deep: #f5edd6;
  --gilt: #f2c13a;
  --gilt-hover: #e0ab1f;
  --on-gilt: #1c1b18;
  --gilt-ink: #835400;
  --garnet: #a3101c;
  --garnet-soft: #f8e5e2;
  --on-garnet: #ffffff;
  --verdant: #0b6b24;
  --verdant-soft: #e3f2e5;
  --focus: var(--lapis);
  --link: var(--lapis);
  --glass-blue: #4d7fc4;
  --glass-gold: #f7cb42;
  --glass-red: #bd0213;
  --glass-green: #039115;
  --glass-ivory: #f5edd6;
  --glass-lead: #121310;
  --shadow-raised: 0 1px 2px rgba(28,27,24,0.06), 0 4px 16px rgba(28,27,24,0.06);
}
[data-theme="dark"] {
  --surface: #11161f;
  --surface-raised: #19202c;
  --surface-sunken: #0c1017;
  --line: #2e3747;
  --line-strong: #6b7487;
  --ink: #f4efe3;
  --ink-muted: #b3ac9e;
  --lapis: #8fb4ee;
  --lapis-hover: #b0caf3;
  --lapis-soft: #1a2a45;
  --on-lapis: #0c1017;
  --lapis-deep: #1c3a69;
  --on-lapis-deep: #f5edd6;
  --gilt: #f2c13a;
  --gilt-hover: #f7d36d;
  --on-gilt: #1c1b18;
  --gilt-ink: #f2c13a;
  --garnet: #f08a82;
  --garnet-soft: #3a1619;
  --on-garnet: #11161f;
  --verdant: #6fd283;
  --verdant-soft: #12301a;
  --focus: var(--gilt);
  --link: var(--lapis);
  --glass-blue: #4d7fc4;
  --glass-gold: #f7cb42;
  --glass-red: #bd0213;
  --glass-green: #039115;
  --glass-ivory: #f5edd6;
  --glass-lead: #121310;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --measure: 68ch;
  --container: 1200px;
  --control-height: 48px;
  --hairline: 1px;
  --came: 2px;
  --font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans: Figtree, "Segoe UI", system-ui, sans-serif;
}
.display { font-family: var(--font-serif); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-serif); font-size: 44px; line-height: 52px; font-weight: 600; }
.h2 { font-family: var(--font-serif); font-size: 34px; line-height: 42px; font-weight: 600; }
.h3 { font-family: var(--font-serif); font-size: 26px; line-height: 32px; font-weight: 600; }
.h4 { font-family: var(--font-serif); font-size: 21px; line-height: 28px; font-weight: 600; }
.scripture { font-family: var(--font-serif); font-size: 24px; line-height: 34px; font-weight: 400; font-style: italic; }
.verse { font-family: var(--font-serif); font-size: 19px; line-height: 29px; font-weight: 400; }
.reference { font-family: var(--font-serif); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.08em; }
.rubric { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 31px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
@media (max-width: 640px) { .display { font-size: 44px; line-height: 48px; } }