/* ============================================================
   Kommunity Kares — Colors & Type tokens
   Helping People, Changing Lives.
   ============================================================ */

/* Fonts — sourced from Google Fonts as the nearest match to the
   flyer's sans-serif. The flyer uses a humanist geometric sans
   (likely Avenir / Open Sans). Source Sans 3 is the Google match. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --------------------------------------------------------
     COLOR — Brand
     -------------------------------------------------------- */
  --kk-blue-50:  #EEF6FC;
  --kk-blue-100: #D6EAF7;
  --kk-blue-200: #A9D1EC;
  --kk-blue-300: #6FB3DD;
  --kk-blue-400: #3A91CB;
  --kk-blue-500: #0F6FB4; /* primary — logo & flyer headings */
  --kk-blue-600: #0970B5; /* flyer panel background */
  --kk-blue-700: #0A5890;
  --kk-blue-800: #084373;
  --kk-blue-900: #062E52; /* deep navy */
  --kk-blue-950: #041D37;

  /* Navy / charcoal panel — used as secondary dark surface on the flyer */
  --kk-navy-500: #2E3A46;
  --kk-navy-700: #1C242D;
  --kk-navy-900: #0F151B;

  /* Neutral grays (cool) */
  --kk-white:   #FFFFFF;
  --kk-gray-25:  #FAFBFC;
  --kk-gray-50:  #F3F5F8;
  --kk-gray-100: #E6EAEF;
  --kk-gray-200: #CFD5DD;
  --kk-gray-300: #AEB6C1;
  --kk-gray-400: #7E8894;
  --kk-gray-500: #5A6573; /* logo secondary gray */
  --kk-gray-600: #434C58;
  --kk-gray-700: #2F3641;
  --kk-gray-800: #1E242C;
  --kk-gray-900: #0F131A;

  /* Semantic accents — kept restrained, blue-adjacent */
  --kk-success: #1E8E5F;
  --kk-warning: #C28B1A;
  --kk-error:   #C0392B;
  --kk-info:    var(--kk-blue-500);

  /* --------------------------------------------------------
     SEMANTIC color roles
     -------------------------------------------------------- */
  --bg:            var(--kk-white);
  --bg-subtle:     var(--kk-gray-50);
  --bg-muted:      var(--kk-gray-100);
  --bg-brand:      var(--kk-blue-500);
  --bg-brand-soft: var(--kk-blue-50);
  --bg-navy:       var(--kk-navy-500);
  --bg-dark:       var(--kk-gray-900);

  --fg:            var(--kk-gray-900);
  --fg1:           var(--kk-gray-900);  /* primary text */
  --fg2:           var(--kk-gray-600);  /* body copy */
  --fg3:           var(--kk-gray-500);  /* muted, meta */
  --fg4:           var(--kk-gray-400);  /* subtlest */
  --fg-on-brand:   var(--kk-white);
  --fg-on-dark:    var(--kk-white);
  --fg-brand:      var(--kk-blue-500);
  --fg-brand-deep: var(--kk-blue-700);

  --border:        var(--kk-gray-200);
  --border-strong: var(--kk-gray-300);
  --border-brand:  var(--kk-blue-500);
  --divider:       var(--kk-gray-100);

  /* Link */
  --link:         var(--kk-blue-500);
  --link-hover:   var(--kk-blue-700);
  --link-visited: var(--kk-blue-800);

  /* --------------------------------------------------------
     TYPE — families
     -------------------------------------------------------- */
  --font-sans:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights — display uses heavy, body uses regular */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Sizes — modest step scale (1.200) anchored at 16px body */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — display is slightly tightened; eyebrows use tracked caps */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.12em;

  /* --------------------------------------------------------
     SPACING — 4px base grid
     -------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;  /*  4 */
  --sp-2:  0.5rem;   /*  8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */

  /* --------------------------------------------------------
     RADII — modest, rectangular panels are the norm
     -------------------------------------------------------- */
  --radius-0:   0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --------------------------------------------------------
     SHADOWS — quiet, utilitarian; no glow
     -------------------------------------------------------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(15, 21, 27, 0.06);
  --shadow-sm:   0 1px 3px rgba(15, 21, 27, 0.08), 0 1px 2px rgba(15, 21, 27, 0.04);
  --shadow-md:   0 4px 10px rgba(15, 21, 27, 0.08), 0 2px 4px rgba(15, 21, 27, 0.04);
  --shadow-lg:   0 12px 28px rgba(15, 21, 27, 0.12), 0 4px 8px rgba(15, 21, 27, 0.04);
  --shadow-ring-brand: 0 0 0 3px rgba(15, 111, 180, 0.25);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--sp-6);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — reusable helpers
   ============================================================ */

.kk-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
  line-height: var(--lh-snug);
}

.kk-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.kk-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-brand); /* flyer pattern: section heads are blue */
}

.kk-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
}

.kk-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.kk-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.kk-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.kk-small, small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.kk-quote, blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-on-brand);
}

code, .kk-code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* Base reset-ish */
html { font-family: var(--font-sans); color: var(--fg1); }
body { margin: 0; background: var(--bg); color: var(--fg1); font-family: var(--font-sans); }