/* PIOUS Foundation — assets/css/brand.css */
:root {
  --color-primary:      #020149;   /* deep navy — logo color, non-negotiable */
  --color-primary-rgb:  2, 1, 73;
  --color-accent: #ff4700;   /* warm gold */
  --color-accent-rgb:   200, 153, 42;
  --color-accent-light: #F5EDD3;   /* gold tint for backgrounds */
  --color-light:        #F6F8FC;   /* near-white section bg */
  --color-heading:      #0D0C2B;   /* near-black headings */
  --color-body:         #5A5A7A;   /* muted navy-grey body text */
  --color-white:        #FFFFFF;
  --color-border:       #E2E4EE;
  --color-dark-footer:  #020149;   /* footer bg = primary */
  --font-heading: 'Manrope', sans-serif;   /* all headings, nav, buttons */
  --font-body:    'Nunito', sans-serif;    /* body text, paragraphs, labels */
  --font-accent:  'Caveat', cursive;       /* decorative use only */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 90px;
  --space-3xl: 120px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 8px  rgba(2,1,73,.06);
  --shadow-md:  0 8px 32px rgba(2,1,73,.10);
  --shadow-lg:  0 20px 60px rgba(2,1,73,.14);
  --transition: all .3s ease;
}