/* =========================================================
   United Way Brand System
   Global Design Tokens + Base Styles
   ========================================================= */

/* ---------------------------------------------------------
   Google Fonts
--------------------------------------------------------- */

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


/* ---------------------------------------------------------
   Design Tokens (Colors, Spacing, Radius, Shadows)
--------------------------------------------------------- */

:root {

  /* ---------- Primary Colors ---------- */

  --uw-blue: #0044B5;
  --uw-blue-dark: #21296B;
  --uw-blue-mid: #5082F0;
  --uw-blue-light: #A7D2FF;

  --uw-red: #D12626;
  --uw-red-bright: #FD372C;
  --uw-red-light: #FF806C;
  --uw-red-tint: #FFD7D0;

  --uw-yellow: #FFBA00;
  --uw-yellow-gold: #FAD42F;
  --uw-yellow-light: #FFEAD0;

  /* ---------- Secondary Colors ---------- */

  --uw-green: #009464;
  --uw-green-dark: #156B4C;
  --uw-green-light: #C6F7DA;
  --uw-green-tint: #82D8A4;

  /* ---------- Accent Colors ---------- */

  --uw-purple: #4E4AA6;
  --uw-purple-mid: #6C76D3;
  --uw-purple-light: #8E97EF;
  --uw-purple-tint: #C0C6FC;

  /* ---------- Neutrals ---------- */

  --uw-black: #221E1F;
  --uw-gray: #646567;
  --uw-gray-light: #9E9E9E;
  --uw-gray-tint: #CCCCCC;
  --uw-white: #FFFFFF;
	
	
  /* ---------- Arc Colors ---------- */
  
  .uw-arc-blue {
    --arc-solid: 0, 66, 140;
    --arc-soft:  0, 66, 140;
  }
  
  .uw-arc-yellow {
    --arc-solid: 255, 199, 44;
    --arc-soft:  255, 199, 44;
  }
  
  .uw-arc-red {
    --arc-solid: 204, 30, 36;
    --arc-soft:  204, 30, 36;
  }
  
  .uw-arc-dark {
    --arc-solid: 10, 40, 90;
    --arc-soft:  10, 40, 90;
  }

  /* ---------- Layout Tokens ---------- */

  --uw-radius-lg: 1.25rem;
  --uw-radius-md: 0.9rem;
  --uw-radius-sm: 0.45rem;

  --uw-shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --uw-shadow-medium: 0 12px 35px rgba(0,0,0,0.12);

  --uw-section-pad-y: clamp(3rem, 5vw, 5rem);
  --uw-section-pad-x: clamp(1rem, 3vw, 2rem);

}


/* ---------------------------------------------------------
   Global Reset
--------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

section {
  position: relative;
}


/* ---------------------------------------------------------
   Base Typography
--------------------------------------------------------- */

body {

  font-family: 'Palanquin', Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;

  line-height: 1.6;
  color: var(--uw-black);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.uw-headline {

  font-family: 'Antonio', Arial, sans-serif;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.02em;

  line-height: 1.1;

  color: var(--uw-blue-dark);

}


/* Subheadings */

.uw-subhead {

  font-family: 'Palanquin', Arial, sans-serif;
  font-weight: 600;

  color: var(--uw-blue-dark);

  line-height: 1.3;

}


/* Paragraph readability */

p {
  margin-top: 0;
  margin-bottom: 1rem;
}


/* ---------------------------------------------------------
   Links
--------------------------------------------------------- */

a {
  color: var(--uw-blue);
  text-decoration: none;
}

a:hover {
  color: var(--uw-blue-dark);
  /*text-decoration: underline;*/
}


/* ---------------------------------------------------------
   Utility Text Colors
--------------------------------------------------------- */

.text-uw-blue { color: var(--uw-blue); }
.text-uw-red { color: var(--uw-red); }
.text-uw-yellow { color: var(--uw-yellow); }
.text-uw-green { color: var(--uw-green); }

.text-uw-gray { color: var(--uw-gray); }
.text-uw-muted { color: var(--uw-gray-light); }


/* ---------------------------------------------------------
   Utility Background Colors
--------------------------------------------------------- */

.bg-uw-blue { background: var(--uw-blue); }
.bg-uw-red { background: var(--uw-red); }
.bg-uw-yellow { background: var(--uw-yellow); }
.bg-uw-green { background: var(--uw-green); }

.bg-uw-blue-dark { background: var(--uw-blue-dark); }
.bg-uw-blue-light { background: var(--uw-blue-light); }

.bg-uw-gray-light { background: #f7f8fa; }


/* ---------------------------------------------------------
   Radius Utilities
--------------------------------------------------------- */

.radius-lg { border-radius: var(--uw-radius-lg); }
.radius-md { border-radius: var(--uw-radius-md); }
.radius-sm { border-radius: var(--uw-radius-sm); }


/* ---------------------------------------------------------
   Shadow Utilities
--------------------------------------------------------- */

.shadow-soft {
  box-shadow: var(--uw-shadow-soft);
}

.shadow-medium {
  box-shadow: var(--uw-shadow-medium);
}


/* ---------------------------------------------------------
   Layout Container Tweaks
--------------------------------------------------------- */

.container {

  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);

}


/* ---------------------------------------------------------
   Responsive Font Tweaks
--------------------------------------------------------- */

@media (max-width: 768px) {

  body {
    font-size: 0.97rem;
  }

}