/* ============================================================================
   HHS Theme — Design Tokens (Booking Gap instrument)
   ============================================================================
   Shared CSS custom properties for the booking-gap result + form surfaces.
   Add new tokens here; do not inline magic numbers in feature CSS.

   Conventions:
   - --bgr-*  → result-page-scoped tokens
   - --bgf-*  → form-scoped tokens
   - --hhs-*  → site-global tokens (already defined elsewhere; do not redefine here)

   When to add a token vs use a literal:
   - Used 3+ times across the codebase  → tokenize
   - Semantic value (means something)   → tokenize
   - One-off cosmetic (truly bespoke)   → literal is fine

   Counterpart docs: ARCHITECTURE.md § 7. Discipline:
   memory/hhs_booking_gap_engineering_discipline.md (no-magic-numbers rule).

   Loaded by inc/enqueue.php BEFORE feature CSS so tokens are available
   when downstream rules resolve.
   ============================================================================ */

:root {
	/* ── Radii ──────────────────────────────────────────────────────────── */
	--bgr-radius-card:  2px;   /* every card + panel border-radius */
	--bgr-radius-pill:  999px; /* status flags, mode pills */
	--bgr-radius-soft:  4px;   /* inline callouts (founder conversation, etc) */
	--bgr-radius-warm:  6px;   /* phased-ramp container, dampened callout */

	/* ── Card + panel padding ──────────────────────────────────────────── */
	--bgr-card-pad:        1.5rem; /* .hhs-bgr__ladder, viability panel */
	--bgr-card-pad-tight:  1.25rem;
	--bgr-callout-pad-y:   0.75rem;
	--bgr-callout-pad-x:   1.5rem;
	--bgr-inline-pad-y:    12px;
	--bgr-inline-pad-x:    14px;

	/* ── Typographic scale (mono eyebrows + supporting text) ──────────── */
	--bgr-eyebrow-size:   0.7rem;  /* uppercase mono labels */
	--bgr-meta-size:      0.65rem; /* sub-labels, status flags */
	--bgr-body-sm:        0.85rem; /* secondary supporting copy */
	--bgr-body-xs:        0.78rem; /* helper text under a value */
	--bgr-tracking-mono:  0.12em;  /* uppercase mono letter-spacing */

	/* ── Vertical rhythm (gaps + spacing within sections) ──────────────── */
	--bgr-stack-xs:  0.15rem;
	--bgr-stack-sm:  0.4rem;
	--bgr-stack-md:  0.75rem;
	--bgr-stack-lg:  1.5rem;

	/* ── Paper tints (low-opacity overlays for callout backgrounds) ──── */
	--bgr-tint-paper-04:  rgba(14, 14, 16, 0.04);   /* phased ramp container */
	--bgr-tint-paper-08:  rgba(14, 14, 16, 0.08);
	--bgr-tint-text-55:   rgba(14, 14, 16, 0.55);   /* eyebrow body color */
	--bgr-tint-text-78:   rgba(14, 14, 16, 0.78);   /* viability bench text */
	--bgr-tint-red-06:    rgba(255, 72, 74, 0.06);  /* over-capacity gap callout */
	--bgr-tint-red-10:    rgba(255, 72, 74, 0.10);  /* delta-up pill background */
	--bgr-tint-navy-06:   rgba(39, 96, 146, 0.06);  /* under-deployed callout */
	--bgr-tint-navy-12:   rgba(39, 96, 146, 0.12);  /* delta-down pill background */
	--bgr-tint-teal-06:   rgba(31, 122, 140, 0.06); /* founder-conversation callout */

	/* ── Container widths ───────────────────────────────────────────────── */
	--bgr-max-readable: 56rem;  /* form panels + viability dl + body copy */
	--bgr-max-content:  1200px; /* section inner max-width */

	/* ── Sticky positioning (mobile channel head, etc.) ─────────────────── */
	--bgr-sticky-offset: 79px;  /* matches .hhs-nav fixed-position height */

	/* ── Accent colors (booking-gap-specific, NOT in --hhs-* set) ───────── */
	/* The teal used for the "FOR THE FOUNDER CONVERSATION" callout — distinct
	 * signal that this block speaks to the marketing leader (not the founder),
	 * with content the leader takes UP to ownership. Different palette slot
	 * than --hhs-navy (which marks under-deployed/needs-more-spend signal). */
	--bgr-founder-accent: #1F7A8C;

	/* ── Section callout (reusable shell for full-width data callouts) ───
	 * Used by .hhs-bgr__phased, .hhs-bgr__variance, and future callouts of
	 * the same "labeled block of paper above the channel cards" shape.
	 * Change these once → every callout reads the new geometry. */
	--bgr-callout-pad:    18px 20px;
	--bgr-callout-radius: var(--bgr-radius-warm);

	/* ── Border colors (low-opacity black hairlines) ────────────────────── */
	--bgr-border-soft:     rgba(14, 14, 16, 0.10); /* container outlines */
	--bgr-border-hairline: rgba(14, 14, 16, 0.15); /* table thead/divider */
	--bgr-border-faint:    rgba(14, 14, 16, 0.08); /* tbody row separators */

	/* ── Interactive tints (navy at four opacity stops) ─────────────────── */
	/* Used by the "Questions to ask the agency" pill button to layer
	 * background fill + border + hover/focus state without redeclaring
	 * navy literals. --bgr-tint-navy-06 (already defined above) covers
	 * the resting background. */
	--bgr-tint-navy-10: rgba(39, 96, 146, 0.10); /* hover/focus background */
	--bgr-tint-navy-22: rgba(39, 96, 146, 0.22); /* resting border */
	--bgr-tint-navy-36: rgba(39, 96, 146, 0.36); /* hover/focus border */
}