/* Design tokens — single source of truth for the whole site.
   Values measured from computed styles of camedfoundation.org (see inventory.md). */

:root {
  /* Colors */
  --color-primary: #7cb9a2;      /* buttons, accents, links */
  --color-accent: #cc3366;       /* magenta eyebrow accents */
  --color-teal: #00cea6;         /* highlight section bg */
  --color-ink: #000000;          /* headings */
  --color-text: #333333;         /* body text */
  --color-muted: #494c4f;        /* secondary text */
  --color-dark: #1f2124;         /* dark surfaces / footer */
  --color-cream: #f7f2ed;        /* light section bg */
  --color-cream-2: #fcfaf8;      /* alt light section bg */
  --color-white: #ffffff;
  --color-link-blue: #859fd2;
  --color-navy: #123075;         /* event/post card bg */
  --color-badge: #fa2b56;        /* date badge on cards */
  --color-bright-blue: #2575fc;  /* card CTA button */
  --color-tan: #e6d6c7;          /* about-page band */
  --color-give-green: #75bfa4;   /* donate tabs */

  /* Fonts */
  --font-heading: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Merriweather", Georgia, serif;
  --font-alt: "Geologica", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (desktop values; overridden at breakpoints below) */
  --fs-hero: 4rem;        /* 64px hero h2 */
  --lh-hero: 4.5rem;      /* 72 */
  --fs-section: 3rem;     /* 48 section h2 */
  --lh-section: 3.5rem;   /* 56 */
  --fs-sub: 2.5rem;       /* 40 sub-section h2 */
  --lh-sub: 3rem;         /* 48 */
  --fs-card: 2rem;        /* 32 card h3 */
  --lh-card: 2.5rem;      /* 40 */
  --fs-card-sm: 1.5rem;   /* 24 small card h3 */
  --lh-card-sm: 2rem;     /* 32 */
  --fs-h4: 1.5rem;        /* 24 green h4 */
  --lh-h4: 2rem;          /* 32 */
  --fs-eyebrow: 1.125rem; /* 18 eyebrow chip */
  --fs-eyebrow-sm: 1rem;  /* 16 magenta eyebrow */
  --fs-badge: 0.75rem;    /* 12 date-badge month */
  --fs-body: 1rem;        /* 16 */
  --lh-body: 1.5rem;      /* 24 */
  --fs-serif: 1rem;       /* 16 Merriweather subtitle */
  --lh-serif: 1.2rem;     /* 19.2 */

  /* Spacing scale */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-sm: 1rem;      /* 16 */
  --space-md: 1.25rem;   /* 20 */
  --space-lg: 1.5rem;    /* 24 */
  --space-xl: 2rem;      /* 32 */
  --space-2xl: 2.5rem;   /* 40 */
  --space-3xl: 4rem;     /* 64 */
  --space-4xl: 5rem;     /* 80 */

  /* Section rhythm */
  --section-pad-x: 5rem;    /* 80 desktop */
  --section-pad-y: 5rem;
  --container-max: 71.25rem;  /* 1140 boxed */
  --container-wide: 80rem;    /* 1280 */

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 80px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 100px rgba(18, 18, 18, 0.08);
  --shadow-glow-lg: 0 0 160px rgba(18, 18, 18, 0.08);

  /* Buttons */
  --btn-pad-y: 0.5rem;
  --btn-pad-x: 1rem;

  /* Breakpoints (reference only; media queries use the values below) */
  --bp-tablet: 1024px;
  --bp-mobile: 767px;
}

@media (max-width: 1024px) {
  :root {
    --fs-hero: 3.5rem;      /* 56 */
    --lh-hero: 4rem;
    --fs-section: 2.5rem;   /* 40 */
    --lh-section: 3rem;
    --fs-sub: 2.25rem;      /* 36 */
    --lh-sub: 2.5rem;
    --fs-card: 1.75rem;     /* 28 */
    --lh-card: 2rem;
    --fs-card-sm: 1.25rem;  /* 20 */
    --lh-card-sm: 1.5rem;
    --fs-h4: 1.25rem;       /* 20 */
    --lh-h4: 1.5rem;
    --fs-eyebrow-sm: 0.875rem; /* 14 */
    --section-pad-x: 2rem;  /* 32 */
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 3rem;        /* 48 */
    --lh-hero: 3.5rem;
    --fs-section: 2.25rem;  /* 36 */
    --lh-section: 2.5rem;
    --fs-sub: 2rem;         /* 32 */
    --lh-sub: 2.25rem;
    --fs-card: 1.5rem;      /* 24 */
    --lh-card: 1.75rem;
    --fs-card-sm: 1.125rem; /* 18 */
    --lh-card-sm: 1.25rem;
    --fs-h4: 1.125rem;      /* 18 */
    --lh-h4: 1.25rem;
    --fs-eyebrow: 1rem;
    --fs-eyebrow-sm: 0.75rem; /* 12 */
    --section-pad-x: 1rem;  /* 16 */
  }
}