/*
 * Design tokens for the Bethesda Felixstowe site.
 *
 * Sourced from reference/design-notes.md, which was captured by running
 * getComputedStyle against the live site in a real browser. The wget
 * mirror's CSS is not a reliable source for these values.
 *
 * Update tokens here, not at call sites.
 */

:root {
  /* Palette */
  --color-brand: #bc1414;            /* canonical brand red: buttons, red headings, intro band */
  --color-brand-bright: #db1414;     /* hero "FELIXSTOWE" word only; close enough that we could collapse */
  --color-text: #333;
  --color-heading: #111;             /* black-ish headings: "WHO WE ARE", "WHAT WE DO" */
  --color-on-brand: #fff;            /* text on brand-red surfaces and buttons */
  --color-rule: rgba(0, 0, 0, 0.1);  /* hairline section dividers */

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --size-body: 16px;
  --line-body: 1.75;

  --size-hero-kicker: 48px;          /* "BETHESDA BAPTIST CHURCH" */
  --line-hero-kicker: 60px;
  --tracking-hero-kicker: 4px;
  --weight-hero-kicker: var(--weight-semibold);

  --size-hero: 70px;                 /* "FELIXSTOWE" */
  --line-hero: 70px;

  --size-section: 36px;              /* "WHO WE ARE", "WHERE WE ARE", "WHAT WE DO", "WHO IS JESUS?" */
  --line-section: 45px;

  --size-intro: 45px;                /* "BETHESDA BAPTIST CHURCH, FELIXSTOWE" on red band */

  --size-button: 16px;

  /* Layout */
  --container-desktop: 1200px;
  --container-tablet: 1024px;        /* applies at <=1024px viewport */
  --container-mobile: 767px;         /* applies at <=767px viewport */
  --space-widget: 20px;              /* Elementor's standard inter-widget gap */

  /* Buttons */
  --btn-radius: 3px;
  --btn-padding: 21px 30px;

  /* Vertical rhythm between page sections. Mobile uses the smaller
     value via the media query below so spacing scales gracefully. */
  --section-y: 96px;
}

@media (max-width: 767px) {
  :root {
    --section-y: 56px;
  }
}