/* =========================================================================
   CAFA design tokens — the single source of truth for color, depth,
   typography, spacing, radius and motion. Every other stylesheet reads
   these variables; change a value here and the whole site follows.

   Color model: oklch(lightness chroma hue).
   - Neutrals are one shade ramp tinted with CAFA green (hue 150).
   - Depth comes from lightness: the closer a surface is to the reader,
     the lighter it is (bg-dark < bg < bg-light), in both themes.
   - Shadows pair a light inset top edge with a short dark shadow and a
     longer soft one (small / medium / large).
   ========================================================================= */

/* Every family is self-hosted (the CSP allows fonts only from this origin) and declared here. A
   browser downloads a face only when text on the page uses it, so the families of the pairings
   that aren't selected cost nothing. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-normal-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-normal-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-normal-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-normal-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-normal-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-italic-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-normal-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-normal-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Brand hues (from the current site: green #344734, beige #e7d1b5, amber #f1a638) */
  --hue-brand: 150;
  --hue-warm: 75;
  --hue-accent: 72;

  /* ---- Neutral shade ramp (light theme) */
  --bg-dark: oklch(0.935 0.011 var(--hue-brand));   /* recessed: page wells, inputs, alt sections */
  --bg: oklch(0.968 0.008 var(--hue-brand));        /* base page surface */
  --bg-light: oklch(0.995 0.003 var(--hue-brand));  /* raised: cards, header, menus */
  --text: oklch(0.24 0.025 var(--hue-brand));
  --text-muted: oklch(0.43 0.022 var(--hue-brand));
  --border: oklch(0.88 0.012 var(--hue-brand));     /* decorative dividers */
  --border-strong: oklch(0.6 0.018 var(--hue-brand)); /* form controls: >= 3:1 on every surface */
  --highlight: oklch(1 0 0);                        /* top edge of raised surfaces */

  /* ---- Brand + semantic colors */
  --primary: oklch(0.44 0.085 var(--hue-brand));
  --primary-hover: oklch(0.38 0.08 var(--hue-brand));
  --on-primary: oklch(0.99 0.006 var(--hue-brand));
  --primary-soft: oklch(0.93 0.035 var(--hue-brand));   /* tinted chips, icon wells */
  --on-primary-soft: oklch(0.32 0.07 var(--hue-brand));

  --accent: oklch(0.8 0.145 var(--hue-accent));          /* donate, key highlights */
  --accent-hover: oklch(0.84 0.135 var(--hue-accent));
  --on-accent: oklch(0.24 0.05 55);

  --warm: oklch(0.925 0.034 var(--hue-warm));            /* sand surface for quotes */
  --on-warm: oklch(0.26 0.03 60);

  --brand-surface: oklch(0.31 0.05 var(--hue-brand));    /* deep forest bands */
  --brand-surface-2: oklch(0.255 0.045 var(--hue-brand));
  --on-brand: oklch(0.975 0.008 var(--hue-brand));
  --on-brand-muted: oklch(0.86 0.03 var(--hue-brand));

  --link: oklch(0.42 0.095 var(--hue-brand));
  --link-hover: oklch(0.33 0.09 var(--hue-brand));
  --focus: oklch(0.52 0.15 245);
  --danger: oklch(0.5 0.17 27);
  --danger-soft: oklch(0.95 0.03 27);
  --success: oklch(0.45 0.1 150);

  /* ---- Depth: shadows tinted with the brand hue */
  --shadow-color: 0.25 0.03 var(--hue-brand);
  --shadow-s: inset 0 1px 0 oklch(1 0 0 / 0.7),
              0 1px 2px oklch(var(--shadow-color) / 0.12),
              0 2px 4px oklch(var(--shadow-color) / 0.06);
  --shadow-m: inset 0 1px 0 oklch(1 0 0 / 0.8),
              0 2px 4px oklch(var(--shadow-color) / 0.12),
              0 6px 14px oklch(var(--shadow-color) / 0.09);
  --shadow-l: inset 0 1px 0 oklch(1 0 0 / 0.9),
              0 6px 12px oklch(var(--shadow-color) / 0.12),
              0 18px 36px oklch(var(--shadow-color) / 0.12);
  --shadow-inset: inset 0 1px 2px oklch(var(--shadow-color) / 0.1);

  /* ---- Hero / banner backgrounds (CSS only — no photos required) */
  --hero-base: var(--brand-surface-2);
  --hero-scrim: oklch(0.36 0.055 var(--hue-brand));     /* tint behind the white hero text; lighter than the base */
  --hero-glow-1: oklch(0.45 0.09 var(--hue-brand) / 0.75);
  --hero-glow-2: oklch(0.55 0.1 var(--hue-accent) / 0.38);
  --hero-glow-3: oklch(0.38 0.06 200 / 0.5);
  --banner-base: oklch(0.925 0.02 var(--hue-brand));
  --banner-glow-1: oklch(0.86 0.06 var(--hue-brand) / 0.9);
  --banner-glow-2: oklch(0.92 0.06 var(--hue-warm) / 0.95);
  --texture-opacity: 0.07;

  /* ---- Generated artwork, painted over the CSS backgrounds above (they show if an image fails) */
  --hero-image: url("../img/generated/hero-home-morning.webp");
  --event-image: url("../img/generated/night-of-light.webp");
  --banner-image: url("../img/generated/banner-light.webp");

  /* ---- Typography. The pairing below is the default (Fraunces at full softness + Figtree);
     the alternatives are the :root[data-type] blocks after the dark theme. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-display: 400;                                 /* headings: regular to medium, never thin */
  --display-variation: "SOFT" 100;                       /* Fraunces softness axis; other faces ignore it */

  --text-xs: 0.875rem;                                   /* 14px: meta only, never paragraphs */
  --text-sm: 1rem;                                       /* 16px: secondary text, nav */
  --text-base: 1.125rem;                                 /* 18px: body copy */
  --text-lg: 1.25rem;                                    /* 20px: lead paragraphs, h4 */
  --text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);  /* h3 */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);    /* h2 */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);   /* h1 */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.08em;
  --measure: 68ch;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 600;                                    /* buttons, labels, emphasis; set per pairing */

  /* ---- Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --container: 75rem;
  --container-narrow: 48rem;

  /* ---- Radius: kept small on purpose. Controls get s, media m, floating panels l.
     --radius-pill is only for things that are round by nature (number badges, avatars). */
  --radius-s: 0.25rem;
  --radius-m: 0.375rem;
  --radius-l: 0.5rem;
  --radius-pill: 999px;

  /* ---- Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration: 220ms;

  /* ---- Layout */
  --header-h: 4.75rem;
  --hero-fade: clamp(7rem, 4rem + 8vw, 12rem);  /* home hero artwork fades into the page over this height */
  --utility-h: 2.5rem;
  --tap: 2.75rem;  /* minimum touch target (44px) */
}

/* ---- Dark theme: same ramp, lightness flipped. Raised = lighter. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-dark: oklch(0.145 0.012 var(--hue-brand));
  --bg: oklch(0.185 0.014 var(--hue-brand));
  --bg-light: oklch(0.235 0.016 var(--hue-brand));
  --text: oklch(0.955 0.008 var(--hue-brand));
  --text-muted: oklch(0.79 0.014 var(--hue-brand));
  --border: oklch(0.31 0.016 var(--hue-brand));
  --border-strong: oklch(0.56 0.018 var(--hue-brand));
  --highlight: oklch(0.42 0.02 var(--hue-brand));

  --primary: oklch(0.8 0.115 var(--hue-brand));
  --primary-hover: oklch(0.86 0.1 var(--hue-brand));
  --on-primary: oklch(0.2 0.03 var(--hue-brand));
  --primary-soft: oklch(0.3 0.045 var(--hue-brand));
  --on-primary-soft: oklch(0.9 0.06 var(--hue-brand));

  --accent: oklch(0.8 0.14 var(--hue-accent));
  --accent-hover: oklch(0.85 0.13 var(--hue-accent));
  --on-accent: oklch(0.22 0.05 55);

  --warm: oklch(0.26 0.028 var(--hue-warm));
  --on-warm: oklch(0.94 0.02 var(--hue-warm));

  --brand-surface: oklch(0.255 0.04 var(--hue-brand));
  --brand-surface-2: oklch(0.2 0.03 var(--hue-brand));
  --on-brand: oklch(0.965 0.008 var(--hue-brand));
  --on-brand-muted: oklch(0.84 0.025 var(--hue-brand));

  --link: oklch(0.83 0.11 var(--hue-brand));
  --link-hover: oklch(0.9 0.09 var(--hue-brand));
  --focus: oklch(0.78 0.13 245);
  --danger: oklch(0.76 0.13 27);
  --danger-soft: oklch(0.27 0.05 27);
  --success: oklch(0.8 0.11 150);

  --shadow-color: 0 0 0;
  --shadow-s: inset 0 1px 0 oklch(1 0 0 / 0.07),
              0 1px 2px oklch(0 0 0 / 0.45),
              0 2px 4px oklch(0 0 0 / 0.25);
  --shadow-m: inset 0 1px 0 oklch(1 0 0 / 0.09),
              0 2px 4px oklch(0 0 0 / 0.45),
              0 6px 14px oklch(0 0 0 / 0.32);
  --shadow-l: inset 0 1px 0 oklch(1 0 0 / 0.11),
              0 6px 12px oklch(0 0 0 / 0.5),
              0 18px 36px oklch(0 0 0 / 0.4);
  --shadow-inset: inset 0 1px 2px oklch(0 0 0 / 0.45);

  --hero-base: oklch(0.17 0.025 var(--hue-brand));
  --hero-scrim: var(--hero-base);
  --hero-glow-1: oklch(0.34 0.07 var(--hue-brand) / 0.7);
  --hero-glow-2: oklch(0.42 0.08 var(--hue-accent) / 0.28);
  --hero-glow-3: oklch(0.3 0.05 200 / 0.45);
  --banner-base: oklch(0.2 0.02 var(--hue-brand));
  --banner-glow-1: oklch(0.3 0.06 var(--hue-brand) / 0.85);
  --banner-glow-2: oklch(0.3 0.045 var(--hue-warm) / 0.7);
  --texture-opacity: 0.09;
  --banner-image: url("../img/generated/banner-dark.webp");
}

/* ---- Type pairings, from docs/cafa-type-study.md. Picked with the preview switcher
   (main.js, "Type lab"), which sets data-type on <html>. Once CAFA chooses one, move its values
   into :root above, delete these blocks and the switcher, and drop the unused font files. */
:root[data-type="newsreader-atkinson"] {   /* Most accessible */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --display-variation: normal;
  --tracking-tight: -0.02em;
  --weight-bold: 700;
}
:root[data-type="lora-source"] {           /* Safest */
  --font-display: "Lora", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --weight-display: 500;
  --display-variation: normal;
  --tracking-tight: -0.01em;
}
:root[data-type="nunito"] {                /* Friendliest */
  --font-display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --weight-display: 700;
  --display-variation: normal;
  --tracking-tight: -0.02em;
  --weight-bold: 700;
}
:root[data-type="fraunces-atkinson"] {     /* The redesign as first built */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --weight-display: 500;
  --display-variation: normal;
  --weight-bold: 700;
}