/*
 * GCN Directory — design tokens.
 *
 * Loaded on every page, before any other GCN stylesheet. Everything else in the
 * child theme reads from here, so a palette or spacing change is made once.
 *
 * These sit alongside Bricks' own theme-style variables rather than replacing
 * them. Bricks defines --color-* and --space-* from its theme styles, but the
 * parent and child sheets define several of those twice with conflicting values
 * (--space-xs resolves to 0.84rem or 2.4rem depending on which sheet wins),
 * which is why GCN work uses its own --gcn-* names and fixed values.
 *
 * Naming: --gcn-<group>-<role>. Roles are semantic, not literal — use
 * --gcn-text-muted, not --gcn-grey-500, so the meaning survives a repalette.
 *
 * COLOUR IS EDITED IN THE BRICKS STYLE MANAGER, NOT HERE. Each colour token
 * resolves to var(--bricks-color-gcn-*), published by the "GCN Directory"
 * palette that bin/apply-bricks-styles.php registers in the connector plugin.
 * Change a swatch there and it moves the Bricks elements and this stylesheet
 * together, including the GeoDirectory markup Bricks cannot reach. The hex
 * after each var() is a fallback, so removing the palette degrades to the
 * designed value rather than to nothing.
 */

:root {

	/* ------------------------------------------------------------------
	 * Brand
	 *
	 * Anchored on what the site already leads with: the teal of the header
	 * button and map pins, and the deep near-navy of headings. A directory of
	 * churches and ministries should read calm and dependable, so the teal is
	 * reserved for actions and the page carries mostly ink on paper.
	 * ------------------------------------------------------------------ */
	--gcn-brand:            var(--bricks-color-gcn-brand, #0e8b72);
	--gcn-brand-strong:     var(--bricks-color-gcn-brand-strong, #0a715c);
	--gcn-brand-soft:       var(--bricks-color-gcn-brand-soft, #e9f7f4);
	--gcn-brand-border:     var(--bricks-color-gcn-brand-border, #bfe3dc);
	--gcn-brand-contrast:   #ffffff;

	/* Secondary, for "featured" and other editorial emphasis. Warm, never loud. */
	--gcn-accent:           var(--bricks-color-gcn-accent, #c88219);
	--gcn-accent-soft:      var(--bricks-color-gcn-accent-soft, #fdf5e8);
	--gcn-accent-border:    var(--bricks-color-gcn-accent-border, #efddbd);

	/* ------------------------------------------------------------------
	 * Ink and surfaces
	 * ------------------------------------------------------------------ */
	--gcn-text:             var(--bricks-color-gcn-text, #1b2028);
	--gcn-text-soft:        var(--bricks-color-gcn-text-soft, #49535f);
	--gcn-text-muted:       var(--bricks-color-gcn-text-muted, #6a7481);
	--gcn-text-faint:       var(--bricks-color-gcn-text-faint, #949da8);
	--gcn-text-inverse:     #ffffff;

	--gcn-surface:          var(--bricks-color-gcn-surface, #ffffff);
	--gcn-surface-sunken:   var(--bricks-color-gcn-surface-sunken, #f5f7f9);
	--gcn-surface-raised:   #ffffff;
	--gcn-surface-inverse:  var(--bricks-color-gcn-surface-inverse, #0a0a0b);

	--gcn-rule:             var(--bricks-color-gcn-rule, #e3e8ee);
	--gcn-rule-strong:      var(--bricks-color-gcn-rule-strong, #cdd5df);

	/* ------------------------------------------------------------------
	 * Status
	 *
	 * Used by Heart Place status and collaboration badges.
	 * ------------------------------------------------------------------ */
	--gcn-positive:         var(--bricks-color-gcn-positive, #1e714a);
	--gcn-positive-soft:    hsl(152 46% 94%);
	--gcn-notice:           var(--bricks-color-gcn-notice, #ac5c15);
	--gcn-notice-soft:      hsl(32 84% 95%);
	--gcn-critical:         var(--bricks-color-gcn-critical, #ba2b26);
	--gcn-critical-soft:    hsl(2 72% 96%);

	/* ------------------------------------------------------------------
	 * Type
	 *
	 * A fixed px scale rather than the theme's clamp()s, so a card in a
	 * three-column grid does not resize independently of the one beside it.
	 * ------------------------------------------------------------------ */
	--gcn-font:             inherit;

	--gcn-text-2xs:         11px;
	--gcn-text-xs:          12px;
	--gcn-text-sm:          13px;
	--gcn-text-base:        15px;
	--gcn-text-md:          16px;
	--gcn-text-lg:          19px;
	--gcn-text-xl:          22px;
	--gcn-text-2xl:         clamp(24px, 2.2vw, 30px);
	--gcn-text-3xl:         clamp(30px, 3.2vw, 44px);

	--gcn-leading-tight:    1.15;
	--gcn-leading-snug:     1.35;
	--gcn-leading-normal:   1.55;
	--gcn-leading-relaxed:  1.75;

	--gcn-tracking-wide:    0.08em;
	--gcn-tracking-tight:   -0.015em;

	--gcn-weight-medium:    500;
	--gcn-weight-semibold:  600;
	--gcn-weight-bold:      700;

	/* ------------------------------------------------------------------
	 * Space — 4px base
	 * ------------------------------------------------------------------ */
	--gcn-space-1:          4px;
	--gcn-space-2:          8px;
	--gcn-space-3:          12px;
	--gcn-space-4:          16px;
	--gcn-space-5:          20px;
	--gcn-space-6:          24px;
	--gcn-space-8:          32px;
	--gcn-space-10:         40px;
	--gcn-space-12:         48px;
	--gcn-space-16:         64px;
	--gcn-space-20:         80px;

	/* ------------------------------------------------------------------
	 * Shape and depth
	 * ------------------------------------------------------------------ */
	--gcn-radius-xs:        6px;
	--gcn-radius-sm:        10px;
	--gcn-radius-md:        14px;
	--gcn-radius-lg:        18px;
	--gcn-radius-pill:      999px;

	--gcn-shadow-sm:        0 1px 2px rgba(23, 43, 77, 0.05);
	--gcn-shadow-md:        0 1px 2px rgba(23, 43, 77, 0.04), 0 8px 20px rgba(23, 43, 77, 0.06);
	--gcn-shadow-lg:        0 1px 2px rgba(23, 43, 77, 0.04), 0 16px 40px rgba(23, 43, 77, 0.10);

	--gcn-ring:             0 0 0 3px hsl(168 70% 88%);

	/* ------------------------------------------------------------------
	 * Accents
	 *
	 * The brand rule that edges the header and the footer. Defined once so the
	 * two cannot drift apart.
	 * ------------------------------------------------------------------ */
	--gcn-brand-rule: linear-gradient(
		90deg,
		var(--gcn-brand) 0%,
		var(--gcn-brand-border) 45%,
		var(--gcn-accent) 100%
	);

	/* ------------------------------------------------------------------
	 * Icons
	 *
	 * Inline SVG rather than an icon font, so an icon can be placed from CSS
	 * alone and takes its colour from a token via mask-image.
	 * ------------------------------------------------------------------ */
	--gcn-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
	--gcn-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.3.2 2.5.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
	--gcn-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.9a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4.1c.7 1 1.2 2.2 1.6 3.9h-3.2c.4-1.7.9-2.9 1.6-3.9zM4.3 14a8 8 0 0 1 0-4h3.3a16.6 16.6 0 0 0 0 4zm.8 2h2.9c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16zm2.9-8H5.1a8 8 0 0 1 4.3-3.6C8.8 5.5 8.3 6.7 8 8zM12 19.9c-.7-1-1.2-2.2-1.6-3.9h3.2c-.4 1.7-.9 2.9-1.6 3.9zm2-5.9h-4a14.8 14.8 0 0 1 0-4h4a14.8 14.8 0 0 1 0 4zm.6 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.9a8 8 0 0 1-4.3 3.6zm1.8-5.6a16.6 16.6 0 0 0 0-4h3.3a8 8 0 0 1 0 4z'/%3E%3C/svg%3E");
	--gcn-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 11.6 12.4 2.6A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .6 1.4l9 9a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E");
	--gcn-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-8 0a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-2.7 0-8 1.3-8 4v3h10v-3c0-1 .4-2.1 1.2-3-1.1-.7-2.4-1-3.2-1zm8 0c-.6 0-1.4.1-2.2.3A5 5 0 0 1 16 17v3h8v-3c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E");
	--gcn-icon-speech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 9h10v2H7zm0-4h10v2H7zm0 8h7v2H7z'/%3E%3C/svg%3E");
	--gcn-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7z'/%3E%3C/svg%3E");
	--gcn-icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 8l10 6 10-6zM2 12.5l10 6 10-6-1.9-1.2-8.1 4.9-8.1-4.9zM2 17l10 6 10-6-1.9-1.2-8.1 4.9L3.9 15.8z'/%3E%3C/svg%3E");
	--gcn-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E");
	--gcn-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
	--gcn-icon-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13h11.2l-4.6 4.6L13 19l7-7-7-7-1.4 1.4L16.2 11H5z'/%3E%3C/svg%3E");
	--gcn-icon-arrow-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11H7.8l4.6-4.6L11 5l-7 7 7 7 1.4-1.4L7.8 13H19z'/%3E%3C/svg%3E");
	--gcn-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	--gcn-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");

	/* ------------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------------ */
	--gcn-ease:             cubic-bezier(0.4, 0, 0.2, 1);
	--gcn-duration:         0.2s;
}

@media (prefers-reduced-motion: reduce) {

	:root {
		--gcn-duration: 0s;
	}
}