/* ============================================================
   Design System — Church of the Nazarene (nazarene.org)
   Source: extracted 2026-05-16
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700;900&display=swap');

:root {

  /* --- Typography --- */
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Lato', sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --text-xs:   12px;   /* 0.75rem  — small labels, meta */
  --text-sm:   14px;   /* 0.875rem — captions, footnotes */
  --text-base: 16px;   /* 1rem     — body copy */
  --text-md:   18px;   /* 1.125rem — lead text, h6 */
  --text-lg:   20px;   /* 1.25rem  — h5, card titles */
  --text-xl:   24px;   /* 1.5rem   — h4 */
  --text-2xl:  28px;   /* 1.75rem  — h3 */
  --text-3xl:  40px;   /* 2.5rem   — h2, section titles */
  --text-4xl:  48px;   /* 3rem     — h1, hero titles */

  --line-height-tight:  1.1;
  --line-height-snug:   1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.7;

  /* --- Colors: Brand --- */
  --color-primary:       #54a0ba;   /* nazarene teal-blue */
  --color-primary-dark:  #4283b7;   /* hover/active state */
  --color-primary-navy:  #004d99;   /* emphasis, dark headers */
  --color-primary-mid:   #5798d0;   /* mid-blue variant */
  --color-primary-light: #6ec1e4;   /* light-blue / jet button */

  /* --- Colors: Neutral --- */
  --color-white:       #ffffff;
  --color-black:       #000000;
  --color-text:        #333333;     /* primary body text */
  --color-text-muted:  #4a4b4c;     /* secondary text, nav */
  --color-gray-light:  #eeeeee;     /* hover background */
  --color-gray-border: #ebebeb;     /* card borders, dividers */
  --color-gray-mid:    #cdcdcd;     /* input borders */

  /* --- Colors: Ministry Categories --- */
  --color-orange:    #f47b20;   /* missions */
  --color-blue-gray: #53819a;   /* discipleship */
  --color-red:       #ee4237;   /* youth / alert */
  --color-green:     #40996d;   /* stewardship */
  --color-gold:      #e8be1f;   /* NMI */
  --color-purple:    #836aa2;   /* women's ministry */

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  5px;
  --space-3:  5.5px;
  --space-4:  6px;
  --space-5:  8px;
  --space-6:  10px;
  --space-7:  14.4px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 23px;
  --space-11: 25px;
  --space-12: 30px;
  --space-13: 34px;
  --space-14: 40px;
  --space-15: 50px;
  --space-16: 70px;
  --space-17: 100px;
  --space-18: 120px;
  --space-19: 140px;

  /* --- Border Radius --- */
  --radius-xs:    3px;    /* small buttons, search */
  --radius-sm:    4px;    /* buttons, chips */
  --radius-md:    10px;   /* cards, tags, most elements */
  --radius-lg:    40px;   /* large banners, hero sections */
  --radius-round: 50%;    /* avatar, badge, icon circle */
  --radius-pill:  100px;  /* pill buttons, tags */

  /* --- Shadows --- */
  --shadow-soft:  0 0 8px rgba(0, 0, 0, 0.6);                  /* nav, sticky header */
  --shadow-card:  rgba(0, 0, 0, 0.23) 0px 40px 35px 0px;       /* cards, panels */
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 0px 24px 10px;       /* modals, overlays */

  /* --- Borders --- */
  --border-light:  1px solid #ebebeb;   /* card borders, dividers */
  --border-mid:    1px solid #cdcdcd;   /* input borders, nav items */
  --border-strong: 2px solid #1f2124;   /* active underline, emphasis */
}