/* ICCF foundations: 2 of 3, design tokens
   Two layers:
   1. ICCF tokens (iccfux-design.md §2.1 and §2.3). These are the only colours used.
   2. The Karuna template's own variable names, kept so its components work
      unchanged. Every template colour points at an ICCF token; type and
      spacing values are the template's, copied without changes.
   Don't write raw hex anywhere else. */

:root {
  /* ---------- 1. ICCF colour (ux §2.1) ---------- */
  --color-primary: #0C4C86;
  --color-primary-dark: #08375F;
  --color-primary-bg: #E9F0F7;
  --color-accent: #C1550E;        /* Donate and Join buttons only */
  --color-accent-dark: #9C440B;
  --color-accent-bg: #FBEFE4;
  --color-sky: #2C7FB8;           /* graphics only, never text or small icons */
  --color-success: #1A6B3C;
  --color-success-bg: #E6F4EA;
  --color-warning: #8A5A00;       /* waiting */
  --color-warning-bg: #FDF3DE;
  --color-danger: #A4161A;        /* wrong or overdue */
  --color-danger-bg: #FCEAEA;
  --color-text: #171B21;
  --color-text-muted: #555C66;    /* lightest text colour allowed */
  --color-border: #6A7079;
  --color-rule: #CBD2DA;          /* decorative dividers only */
  --color-border-subtle: var(--color-rule);
  --color-bg: #FFFFFF;
  --color-bg-page: #F3F6F9;
  --color-focus: #171B21;

  /* ---------- ICCF shape and size (ux §2.3) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-section: 120px;         /* space above and below each public page section; 96px tablets, 64px phones */
  --space-sub: 80px;              /* a part inside a section (Make a donation); 64px tablets, 48px phones */
  --space-block: 56px;            /* a section heading to its content; 48px tablets, 40px phones */
  --space-gap: 32px;              /* between cards and stats, and text to its button; 24px tablets and phones */
  --tap-min: 48px;
  --radius: 6px;
  --border-width: 1px;
  --focus-ring: 3px solid var(--color-focus);
  --width-form: 40rem;

  /* ---------- 2. Template fonts (kept) ---------- */
  --inter: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --geist: Geist, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--inter);

  /* ---------- Template colours → ICCF tokens ----------
     template name            was       now                  why */
  --_colors---body-700:       var(--color-text);          /* #3a3a3a  body text is --color-text (ux §2.1) */
  --_colors---dark-800:       var(--color-text);          /* #1f1f1f  headings */
  --_colors---blue-dark-600:  var(--color-primary-dark);  /* #00344e  dark blue sections, white text 12.2:1 */
  --_colors---black-1000:     var(--color-text);          /* #000     image overlays (used at 32-50% opacity) */
  --_colors---button-bg-550:  var(--color-primary);       /* #bc502f  main buttons are primary; Donate/Join get accent in the Button component */
  --_colors---white-100:      var(--color-bg);            /* white */
  --_colors---yellow-400:     var(--color-primary-bg);    /* #f1c777  labels, dots, side bars: no yellow in ICCF */
  --_colors---orange-500:     var(--color-primary);       /* #c85a38  eyebrow text, borders, hovers: orange is for Donate/Join only */
  --_colors---stroke-300:     var(--color-rule);          /* #e1dfdb  decorative lines */
  --_colors---light-200:      var(--color-bg-page);       /* #f1f0ef  light panels */
  --_colors---footer-900:     var(--color-primary-dark);  /* #111     footer ground, keeps white text readable */

  /* ---------- Template type (kept as is) ---------- */
  --_font-size---caps: 14px;
  --_font-size---extra: 32px;
  --_font-size---extra-large: 180px;
  --_font-size---heading-1: 64px;
  --_font-size---heading-2: 52px;
  --_font-size---heading-3: 42px;
  --_font-size---heading-4: 32px;
  --_font-size---heading-5: 28px;
  --_font-size---heading-6: 24px;
  --_font-size---large-heading: 90px;
  --_font-size---large-text: 20px;
  --_font-size---paragraph: 16px;
  --_font-weight---bold: 700;
  --_font-weight---medium: 500;
  --_font-weight---regular: 400;
  --_font-weight---semibold: 600;
  --_line-height---caps: 142.85%;
  --_line-height---extra: 150%;
  --_line-height---extra-large: 77.77%;
  --_line-height---heading-1: 93.75%;
  --_line-height---heading-2: 103.84%;
  --_line-height---heading-3: 107.15%;
  --_line-height---heading-4: 125%;
  --_line-height---heading-5: 128.57%;
  --_line-height---heading-6: 108.33%;
  --_line-height---large-heading: 94.44%;
  --_line-height---paragraph: 160%;

  /* ---------- Template spacing (kept as is) ---------- */
  --_spacing---box-padding-large: 64px;
  --_spacing---box-padding-regular: 32px;
  --_spacing---button-large-horizontal: 36px;
  --_spacing---button-large-vertical: 14px;
  --_spacing---button-small-horizontal: 26px;
  --_spacing---button-small-vertical: 10px;
  --_spacing---column-gap-small: 24px;
  --_spacing---container-large: 1720px;
  --_spacing---container-regular: 1440px;
  --_spacing---container-small: 1196px;
  --_spacing---radius-medium: 12px;
  --_spacing---radius-small: 8px;
  --_spacing---gap-large: 100px;
  --_spacing---section-gap: 40px;
  --_spacing---section-horizontal-padding: 40px;
  --_spacing---section-padding: 200px;
  --_spacing---section-padding-small: 150px;
  --_spacing---spacing-medium: 32px;
  --_spacing---spacing-small: 20px;
  --_spacing---spacing-xs: 16px;
  --_spacing---spacing-xxs: 12px;
}

/* Template tablet and phone sizes, copied as is (colour lines removed: colours come from :root). */
@media screen and (max-width: 991px) {
  body {
    --_spacing---button-large-vertical: 14px;
    --_spacing---button-large-horizontal: 36px;
    --_spacing---button-small-vertical: 10px;
    --_spacing---button-small-horizontal: 26px;
    --_spacing---section-padding: 100px;
    --_spacing---section-horizontal-padding: 25px;
    --_spacing---container-regular: 1440px;
    --_spacing---gap-large: 64px;
    --_spacing---section-gap: 32px;
    --_spacing---section-padding-small: 100px;
    --_spacing---box-padding-large: 32px;
    --_spacing---spacing-small: 20px;
    --_spacing---box-padding-regular: 24px;
    --_spacing---radius-medium: 12px;
    --_spacing---spacing-xxs: 12px;
    --_spacing---column-gap-small: 24px;
    --_spacing---spacing-xs: 16px;
    --_spacing---spacing-medium: 24px;
    --_spacing---container-small: 1196px;
    --_spacing---radius-small: 8px;
    --_spacing---container-large: 1720px;
    --_font-size---paragraph: 16px;
    --_font-size---heading-1: 54px;
    --_font-size---heading-2: 44px;
    --_font-size---heading-3: 36px;
    --_font-size---heading-4: 28px;
    --_font-size---heading-5: 24px;
    --_font-size---heading-6: 22px;
    --_font-size---large-text: 18px;
    --_font-size---caps: 14px;
    --_font-size---large-heading: 72px;
    --_font-size---extra: 28px;
    --_font-size---extra-large: 80px;
    --_line-height---paragraph: 160%;
    --_line-height---heading-1: 93.75%;
    --_line-height---heading-2: 103.84%;
    --_line-height---heading-3: 107.15%;
    --_line-height---heading-4: 125%;
    --_line-height---heading-5: 128.57%;
    --_line-height---heading-6: 108.33%;
    --_line-height---caps: 142.85%;
    --_line-height---large-heading: 94.44%;
    --_line-height---extra: 150%;
    --_line-height---extra-large: 77.77%;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_spacing---button-large-vertical: 10px;
    --_spacing---button-large-horizontal: 26px;
    --_spacing---button-small-vertical: 8px;
    --_spacing---button-small-horizontal: 20px;
    --_spacing---section-padding: 64px;
    --_spacing---section-horizontal-padding: 25px;
    --_spacing---container-regular: 1440px;
    --_spacing---section-gap: 24px;
    --_spacing---section-padding-small: 64px;
    --_spacing---box-padding-large: 32px;
    --_spacing---spacing-small: 20px;
    --_spacing---box-padding-regular: 24px;
    --_spacing---radius-medium: 12px;
    --_spacing---spacing-xxs: 12px;
    --_spacing---column-gap-small: 20px;
    --_spacing---spacing-xs: 16px;
    --_spacing---spacing-medium: 24px;
    --_spacing---container-small: 1196px;
    --_spacing---radius-small: 8px;
    --_spacing---container-large: 1720px;
    --_font-size---paragraph: 16px;
    --_font-size---heading-1: 38px;
    --_font-size---heading-2: 32px;
    --_font-size---heading-3: 28px;
    --_font-size---heading-4: 26px;
    --_font-size---heading-5: 24px;
    --_font-size---heading-6: 22px;
    --_font-size---large-text: 18px;
    --_font-size---caps: 12px;
    --_font-size---large-heading: 38px;
    --_font-size---extra: 24px;
    --_font-size---extra-large: 50px;
    --_line-height---paragraph: 160%;
    --_line-height---heading-1: 93.75%;
    --_line-height---heading-2: 103.84%;
    --_line-height---heading-3: 107.15%;
    --_line-height---heading-4: 125%;
    --_line-height---heading-5: 128.57%;
    --_line-height---heading-6: 108.33%;
    --_line-height---caps: 142.85%;
    --_line-height---large-heading: 94.44%;
    --_line-height---extra: 150%;
    --_line-height---extra-large: 77.77%;
  }
}

/* Section spacing steps down with the screen (8px grid) */
@media screen and (max-width: 991px) {
  :root {
    --space-section: 96px;
    --space-sub: 64px;
    --space-block: 48px;
    --space-gap: 24px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --space-section: 64px;
    --space-sub: 48px;
    --space-block: 40px;
  }
}

/* An uploaded logo (Logo and favicon, ux 6.25) takes the wordmark's place at the same height (12 Oct 2026). */
.brand_logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 100%;
}