/*
 * Camp Canopy design tokens.
 * Sources: theme-redo/audit/design-system.md (measured, 1:1) and theme-redo/build/design-spec.md section 0 (approved changes).
 * Brand hexes stay as tokens for decoration; companions carry text where A3 applies.
 * Breakpoints are literal in media queries (custom properties can't be used there):
 *   1025px  post sidebar, /news/ 3 columns, subscribe band 2 columns
 *    910px  nav: desktop row at >= 910, toggle below
 *    768px  columns side by side at >= 768, stacked at <= 767
 */

:root {
	/* ---------- Brand colours that render (design-system 1a) ---------- */
	--cc-green: #44693d;
	--cc-green-deep: #0e632f;       /* Camp intro right column (R-19) */
	--cc-green-button: #406036;     /* registration button (R-19) */
	--cc-teal: #30b0b4;             /* brand teal: decoration only, unused by the footer now (A3) */
	--cc-panel-blue: #b7c9d3;
	--cc-panel-grey: #dfe3e8;
	--cc-text: #65665c;
	--cc-text-kit: #7a7a7a;         /* leaked kit grey: decoration reference only; text uses the companions */
	--cc-heading-astra: #3a3a3a;
	--cc-nav: #333333;
	--cc-black: #000000;
	--cc-white: #ffffff;
	--cc-social: #727272;           /* footer social circles (J7: kept) */
	--cc-alert: #d63638;
	--cc-gf-blue: #204ce5;          /* GF Submit (R-29) */
	--cc-roots-border: #b2b2b2;
	--cc-deadline: #444444;         /* "Deadline:" line (Customizer .reg-deadline-sub) */

	/* ---------- A3 companions (design-spec section 0) ---------- */
	--cc-teal-band: #238184;        /* footer band behind white text, 4.62 */
	--cc-text-kit-on-white: #757575;
	--cc-text-kit-on-grey: #636363;
	--cc-text-kit-on-blue: #515151;
	--cc-text-on-blue: #52524a;
	--cc-text-on-grey: #63645b;
	--cc-green-on-blue: #3a5934;
	--cc-gf-desc: #4c525c;
	--cc-gf-error: #972208;         /* A3 companion of GF's #c02b0a, same hue: 4.83 on the panel, 8.24 on white (L20) */
	--cc-gf-error-rgb: 151, 34, 8;
	--cc-text-on-parchment: #515151; /* Phase 6: About Roots text over Parchment.jpg; 5.74 on the 5th-percentile parchment tone (#757575 averaged 4.12). Jim to confirm */
	--cc-dot-inactive: #757575;     /* slider dots (design-spec 5b) */

	/* ---------- States ---------- */
	--cc-green-hover: #375632;      /* J10 only (hover.css), and the consent accent_dark */
	--cc-focus: #44693d;
	--cc-focus-on-dark: #ffffff;
	--cc-border-soft: #dfe3e8;

	/* ---------- Shadows, radii ---------- */
	--cc-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	--cc-shadow-roots: 0 0 10px 0 rgba(61, 61, 61, 0.5);
	--cc-shadow-reg: 0 4px 6px rgba(0, 0, 0, 0.1);
	--cc-shadow-reg-hover: 0 2px 4px rgba(0, 0, 0, 0.2);
	--cc-radius-button: 3px;
	--cc-radius-reg: 5px;
	--cc-radius-alert: 4px;

	/* ---------- Type (design-system 2) ---------- */
	--cc-font-body: Arial, Helvetica, Verdana, sans-serif;
	--cc-font-head: "Roboto Slab", Georgia, serif;
	--cc-font-ui: Roboto, Arial, sans-serif;
	--cc-fs-root: 15px;
	--cc-fs-body: 15px;
	--cc-lh-body: 1.65;
	--cc-fw-head: 600;
	--cc-fw-title: 400;
	--cc-fs-h2: 42px;
	--cc-fs-h3: 30px;
	--cc-fs-h3-card: 20px;
	--cc-fs-h4: 24px;
	--cc-fs-h5: 20px;
	--cc-fs-post-h2: 40px;
	--cc-fs-entry-title: 30px;
	--cc-fs-archive-title: 40px;
	--cc-fs-nav: 15px;
	--cc-fs-button: 15px;

	/* ---------- Layout (A10, design-spec 3) ---------- */
	--cc-maxw: 1300px;
	--cc-container: var(--cc-maxw);
	--container: var(--cc-maxw);
	--cc-gutter: 20px;
	--cc-col-gap: 20px;
	--cc-measure: 72ch;
	--cc-gap: 20px;                 /* Elementor widget gap */
	--cc-space-page: 60px;          /* Astra default-template pages, above and below */
	--cc-nav-dropdown: 190px;
}

@media (max-width: 767px) {
	:root {
		--cc-fs-body: 14px;
		--cc-fs-h2: 25px;
		--cc-fs-h3: 20px;
		--cc-fs-h4: 22px;
		--cc-fs-h5: 18px;
	}
}

/* B10-1: the old site switched to phone type at <= 768px (Astra 4.7.3 inline responsive CSS: html 85.5%,
   h1 30 / h2 25 / h3 20), while columns stacked only at <= 767. These are this file's <= 767 type rules, repeated so
   768 gets them too; 769+ stays desktop, 390 is unchanged. Source: audit/measure/live-tablet-breakpoint.txt */
@media (max-width: 768px) {
	:root { --cc-fs-body: 14px; --cc-fs-h2: 25px; --cc-fs-h3: 20px; --cc-fs-h4: 22px; --cc-fs-h5: 18px; }
}