/* Motion Church — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f5f8fc; /* Page background. A cool, blue-leaning white so photos and blue fills feel native. */
  --surface-raised: #ffffff; /* Cards, nav bar, form fields and the panel a section sits on. */
  --surface-tint: #e2f4fd; /* Soft sky band behind illustrations, photo placeholders and alternating sections (the Zima-style pale blue ground). */
  --line: #d0dcea; /* Hairlines and dividers only. Decorative: never the sole border of a control. */
  --field-line: #7a889f; /* Borders of inputs, selects, checkboxes, radios and the off switch track. 3.4:1 or better on surface and surface-raised in both themes. */
  --ink: #0e1a33; /* Headlines and body copy on surface, surface-raised and surface-tint (15:1 or better in both themes). */
  --ink-muted: #475571; /* Secondary copy, captions and metadata on surface, surface-raised and surface-tint (6.2:1 or better in both themes). */
  --navy: #0e1a33; /* Illustration ink and dark bands in the light theme. Holds the brush lines and darkest stipple. White or sky text on it. */
  --sky: #0dbdf6; /* Brand hue (Bruno Medium Blue). Big fills, media cards, illustration color. Text on sky is always navy (7.9:1), never white. */
  --blue: #1877f2; /* Brand hue (Bruno Dark Blue). Hero blocks, color fields, display type. White on blue is 4.2:1, so text on it must be display size (24px+) or bold 19px+. */
  --blue-deep: #0b4fc4; /* Working blue for buttons, links and small text on light grounds. White on it is 7.2:1. */
  --teal: #077069; /* Supporting accent (Bruno Dark Green). Illustration foliage, a third card color, category chips. White text on it (6:1). */
  --spark: #fabc1c; /* Small highlight only: the ring badge fill, stipple highlights, a single underline. Never a section fill. Navy text on it (10:1). */
  --action: var(--blue-deep); /* Primary button fill, active nav, selected states. */
  --on-action: #ffffff; /* Label and icon color on action. */
  --link: #0b4fc4; /* Inline links on surface and surface-raised (6.7:1 light, 8.9:1 dark). */
  --focus: #0b4fc4; /* 3px focus ring, offset 3px, so it always lands on the page surface (6.7:1 light, 11.6:1 dark). */
  --danger: #b42318; /* Form errors only: the field border, the error message and its icon, on surface and surface-raised (6.2:1 light, 7.3:1 dark). Always paired with a written message. */
  --shadow-lift: 0 24px 48px -24px rgba(14, 26, 51, 0.35); /* Floating stickers and a card lifted over a photo. The system is otherwise flat. */
}
[data-theme="dark"] {
  --surface: #081226;
  --surface-raised: #0f1e3d;
  --surface-tint: #12305e;
  --line: #22385f;
  --field-line: #6a7fa6;
  --ink: #f1f5fb;
  --ink-muted: #a7b5cb;
  --action: var(--sky);
  --on-action: var(--navy);
  --link: #5ccbf8;
  --focus: #7fd8fa;
  --danger: #ff8c7a;
  --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
:root {
  --space-1: 4px; /* Icon to label nudge. */
  --space-2: 8px; /* Tight stacks, chip padding. */
  --space-3: 12px; /* Button gap between label and arrow chip. */
  --space-4: 16px; /* Grid gap for tiles; mobile gutter. */
  --space-5: 24px; /* Card padding (compact), gap between cards. */
  --space-6: 32px; /* Card padding (standard), heading to body. */
  --space-7: 48px; /* Desktop gutter; block spacing inside a section. */
  --space-8: 64px; /* Section padding on mobile. */
  --space-9: 96px; /* Section padding on desktop. */
  --space-10: 128px; /* Hero top padding. */
  --radius-xs: 6px; /* Round base; bundle.css scales radii by --sq (1.6) where corner-shape: squircle is supported. */
  --radius-sm: 8px; /* Small tiles and inner elements. */
  --radius-md: 12.5px; /* Rows, FAQ items, fields outside a panel. */
  --radius-lg: 20px; /* Standard cards and media frames. */
  --radius-xl: 27.5px; /* Large cards, panels and section bands. */
  --radius-pill: 999px; /* Buttons, arches, pill image masks, chips. */
  --font-display: Grovio, "Grovio Demo", Unbounded, "Arial Black", sans-serif;
  --font-subtitle: mozaic-geo-variable, mozaic-geo, Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-body: mozaic-geo-variable, mozaic-geo, Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow: new-spirit, "New Spirit", Fraunces, Georgia, serif;
  --text-display-xl: 700 104px/0.9 var(--font-display); /* Hero headline, one per page. Always uppercase. */
  --text-display-lg: 700 72px/0.92 var(--font-display); /* Section openers and interior page heroes. Uppercase. */
  --text-display-md: 700 48px/0.96 var(--font-display); /* Section headings. Uppercase. */
  --text-display-sm: 700 26px/1 var(--font-display); /* Card titles and stat numbers. Uppercase. */
  --text-display-label: 700 14px/1 var(--font-display); /* Button labels and the ring badge core. Uppercase. Grovio never goes below 14px: its wide counters close up at small sizes. */
  --text-subtitle-lg: 500 32px/1.2 var(--font-subtitle); /* The line directly under a display headline. Sentence case. Mozaic GEO Medium. */
  --text-subtitle: 500 22px/1.3 var(--font-subtitle); /* Section intros, card subtitles and pull quotes. Sentence case. Mozaic GEO Medium. */
  --text-body-lg: 500 19px/1.45 var(--font-body); /* Lead paragraphs. */
  --text-body: 400 16px/1.45 var(--font-body); /* Running text, form fields, cards. */
  --text-body-sm: 500 14px/1.4 var(--font-body); /* Captions, footer, metadata. */
  --text-eyebrow: 600 17px/1.2 var(--font-eyebrow); /* Kicker above a headline, flanked by sparkles. New Spirit SemiBold in title or sentence case, as written. Never in caps. */
  --text-eyebrow-sm: 600 12px/1.2 var(--font-eyebrow); /* Ring badge text, photo tags and small labels. Set as written, never in caps. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 104px;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.display-md {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: 0;
}
.display-sm {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.display-label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.subtitle-lg {
  font-family: var(--font-subtitle);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.subtitle {
  font-family: var(--font-subtitle);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.eyebrow-sm {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@font-face {
  font-family: "Grovio";
  src: url("fonts/GrovioDemo-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}