/*
 * trbc design tokens — the single place where a colour, radius, shadow, type
 * step or spacing step is decided.
 *
 * Why this file exists. An audit of the component stylesheets (nav-modern,
 * page-header, and the eight per-module sheets under divi-modules) found:
 *
 *   · 15 distinct border-radius values — 1, 2, 4, 6, 8, 9, 10, 12, 18, 20,
 *     24px, plus `24pt` (a unit slip, = 32px), and the pill written three
 *     different ways: 999px, 100px and 50%.
 *   · 25 distinct box-shadows, most of them one-offs.
 *   · ~40 colour literals, including six greys that are within a couple of
 *     percent of each other (#6c757d #808285 #6b7280 #595c5e #495057 #adb5bd)
 *     and seven blues (#4995d1 #3a7ab3 #2c6ba1 #2c6b9e #2980b9 #007cba
 *     #1d4e77).
 *   · ~30 font-size declarations mixing px, rem and em.
 *   · 18 media-query breakpoints, including the near-duplicate cluster
 *     767 / 768 / 780 / 782 and 980 / 981 / 992.
 *
 * None of that was a decision; it accumulated. The tokens below are the
 * decisions. A component should reach for a token, and only introduce a raw
 * value when it genuinely needs something no token provides — at which point
 * the right move is usually to add a token.
 *
 * BREAKPOINTS. CSS custom properties cannot be used in media queries, so these
 * are a convention rather than something the file can enforce:
 *
 *     480px   large phone
 *     768px   tablet portrait      (Divi's own phone/tablet edge)
 *     980px   tablet landscape     (Divi's desktop edge; nav-modern switches here)
 *     1200px  desktop
 *
 * Use max-width for the first three and min-width for the last, and do not
 * invent values in between. 782px is the one legitimate exception: it is where
 * WordPress switches the admin bar from fixed to absolute, and it belongs to
 * the admin bar, not to us.
 */

:root {
	/* ---------- ink ----------
	   WAYFINDER. Cool neutrals throughout. The warm palette was an attempt to
	   stop the page feeling like software; it produced a ground that read as
	   tan, which is worse. This direction gets its humanity from photography
	   and its clarity from structure, so the neutrals can be honestly cool and
	   simply get out of the way. Ratios measured against --trbc-ground. */
	--trbc-ink: #10171c;        /* 16.4:1 — body and headings */
	--trbc-ink-soft: #5a6672;   /*  5.4:1 — supporting copy, AA at any size */
	--trbc-ink-faint: #8792a0;  /*  3.1:1 — AA for LARGE text only; never body */
	--trbc-ink-invert: #ffffff;

	/* ---------- ground ----------
	   The page was #f5f5f7, a cool near-white, and with white cards and grey
	   type nothing on the page carried any warmth at all — 7% of visible
	   elements had any brand hue. Warming the neutrals is the cheapest way to
	   make a church page feel like one: it costs no saturation, cannot clash
	   with photography, and lets the cards lift further because white now
	   reads as brighter than its surroundings rather than identical to them. */
	--trbc-ground: #eef1f4;     /* the page */
	--trbc-ground-warm: #f7f6f4; /* invitation bands and photo dissolves */
	--trbc-surface: #ffffff;    /* cards and anything that lifts off the page */
	--trbc-surface-sunk: #e4eaef;  /* the well a logo sits in */
	--trbc-band: #e6ebf0;       /* alternating section ground — a half-step, not
	                               a colour. In Wayfinder the cards do most of
	                               the separating, so the band only has to say
	                               "different section", never "different mood". */
	--trbc-line: #dde3e8;
	--trbc-line-strong: #c6d0d9;
	--trbc-warm: #f3eee8;       /* welcoming, restrained accent surface */
	--trbc-warm-line: #e2d6c9;

	/* ---------- brand ----------
	   --trbc-brand is the identity blue. It is NOT a text colour: white on it
	   is 3.23:1 and it on the page ground is 2.98:1, both under AA. Use
	   --trbc-brand-ink whenever the colour has to carry or receive text. */
	--trbc-brand: #1c6fb4;        /* the fill. White on it measures 5.16:1 */
	--trbc-brand-ink: #1c6fb4;    /* alias — anything that carries white text */
	--trbc-brand-deep: #15568c;   /* text on a light ground: 6.9:1 */
	--trbc-brand-hover: #175d99;
	--trbc-brand-tint: #e6f0f9;   /* chip and ghost-button ground */
	--trbc-brand-border: #b7d3e9; /* ghost-button border */

	--trbc-focus: var(--trbc-brand);

	/* ---------- radius ----------
	   Four steps and a pill. The old set had fifteen, which is not a scale. */
	/* Tighter than before. Large radii read as friendly-consumer; Wayfinder is
	   after crisp and operable, and a 6px control next to a 12px card is a
	   clearer size relationship than 12 next to 18. */
	--trbc-radius-sm: 6px;      /* segmented items, chips */
	--trbc-radius-md: 8px;      /* buttons, inputs */
	--trbc-radius-lg: 12px;     /* cards — the most common shape on the site */
	--trbc-radius-xl: 16px;     /* full-width panels */
	--trbc-radius-pill: 999px;
	/* Every piece of media in the library — a feature photograph, a logo tile,
	   an event image, the small well on a link card — uses this one value. */
	--trbc-radius-media: 10px;

	/* ---------- elevation ----------
	   Three steps, each a close contact shadow plus a wide ambient one. A
	   single large blur reads as haze; the pair reads as a lifted object. */
	--trbc-shadow-1:
		0 1px 2px rgba(16, 23, 28, 0.07),
		0 2px 8px rgba(16, 23, 28, 0.06);
	--trbc-shadow-2:
		0 2px 6px rgba(16, 23, 28, 0.07),
		0 8px 24px rgba(16, 23, 28, 0.09);
	--trbc-shadow-3:
		0 6px 16px rgba(16, 23, 28, 0.09),
		0 18px 48px rgba(16, 23, 28, 0.13);
	/* Coloured lift, for brand-filled controls only. */
	--trbc-shadow-brand: 0 6px 16px -8px rgba(28, 111, 180, 0.55);
	--trbc-shadow-brand-hover: 0 10px 22px -10px rgba(28, 111, 180, 0.6);

	/* ---------- inverse surfaces ----------
	   The footer is the library's primary dark surface. These names describe
	   roles rather than a single component so future dark bands use the same
	   contrast decisions instead of inventing another navy and another grey. */
	--trbc-ink-inverse-ground: #0d2537;
	--trbc-ink-inverse-surface: #143c52;
	--trbc-ink-inverse-soft: #c1ced7;
	--trbc-ink-inverse-faint: #93a6b4;
	--trbc-line-inverse: rgba(255, 255, 255, 0.16);

	/* ---------- type ----------
	   px throughout. rem was in play in some sheets and px in others, and since
	   Divi sets its own root size the two did not agree. */
	--trbc-text-xs: 12px;
	--trbc-text-sm: 13px;
	--trbc-text-base: 15px;
	--trbc-text-md: 17px;
	--trbc-text-lg: 20px;
	--trbc-text-xl: 24px;
	--trbc-text-2xl: 30px;
	/* Fluid display sizes: they must not be a fixed step, because the whole
	   point is that they shrink before they wrap. */
	/* Section headings outrank every item heading beneath them. Before this
	   the only H2 on the page rendered at 30px while three H3s rendered at
	   44px — heading level and visual weight disagreed, so the page had six
	   local decisions rather than one scale. */
	--trbc-text-section: clamp(26px, 2.6vw, 34px);   /* h2 — section titles */
	--trbc-text-display: clamp(24px, 2.2vw, 28px);   /* h3 — feature titles */
	--trbc-text-hero: clamp(30px, 4.4vw, 52px);      /* h1 — one per page */

	--trbc-leading-tight: 1.15;
	--trbc-leading-snug: 1.35;
	--trbc-leading-normal: 1.55;

	--trbc-weight-normal: 400;
	--trbc-weight-medium: 500;
	--trbc-weight-semibold: 600;
	--trbc-weight-bold: 700;

	/* Tracking tightens as type grows — the same value at 12px and 56px is
	   wrong at one end or the other. */
	--trbc-tracking-wide: 0.07em;   /* all-caps eyebrows */
	--trbc-tracking-normal: 0;
	--trbc-tracking-tight: -0.02em;
	--trbc-tracking-display: -0.035em;

	--trbc-face: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
		system-ui, "Open Sans", sans-serif;

	/* ---------- space ----------
	   A 4px grid. Components should compose from these rather than picking
	   9px, 14px, 22px, 26px and 34px as the sheets currently do. */
	--trbc-space-1: 4px;
	--trbc-space-2: 8px;
	--trbc-space-3: 12px;
	--trbc-space-4: 16px;
	--trbc-space-5: 20px;
	--trbc-space-6: 24px;
	--trbc-space-8: 32px;
	--trbc-space-10: 40px;
	--trbc-space-12: 48px;
	--trbc-space-16: 64px;

	/* ---------- measure ----------
	   The content column. The photo band in a page header is allowed to escape
	   this; words are not. */
	--trbc-measure: 1080px;
	--trbc-measure-prose: 68ch;

	/* ---------- motion ----------
	   Two durations. Anything slower than --trbc-ease-slow on a hover feels
	   broken; anything faster than --trbc-ease-quick is not perceived. */
	--trbc-ease-quick: 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
	--trbc-ease-slow: 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);

	/* Minimum comfortable touch target (WCAG 2.5.8 asks 24px; 44px is the
	   platform convention and what we hold ourselves to on phones). */
	--trbc-tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--trbc-ease-quick: 0s;
		--trbc-ease-slow: 0s;
	}
}