/**
 * Launchpad Color Combo System
 *
 * Section-level color schemes applied via block style variations.
 * Each combo sets scoped CSS custom properties that child elements inherit.
 *
 * Usage: Apply "Combo 1", "Combo 2", etc. via the Group block's Style panel.
 * Patterns should reference var(--section-*) properties, not global palette colors.
 *
 * @see docs/color-combos.md
 */

/* ==========================================================================
   Default (no combo applied) — inherits from global styles
   ========================================================================== */

:where(.wp-block-group) {
	--section-bg: var(--wp--preset--color--base);
	--section-heading: var(--wp--preset--color--contrast);
	--section-text: var(--wp--preset--color--contrast);
	--section-link: var(--wp--preset--color--primary);
	--section-button-bg: var(--wp--preset--color--primary);
	--section-button-text: var(--wp--preset--color--surface);
	--section-border: var(--wp--preset--color--outline);
}

/* ==========================================================================
   Combo 1 — Light
   Light background, dark text. Default for most content sections.
   ========================================================================== */

.is-style-combo-1 {
	--section-bg: var(--wp--preset--color--base);
	--section-heading: var(--wp--preset--color--contrast);
	--section-text: var(--wp--preset--color--contrast);
	--section-link: var(--wp--preset--color--primary);
	--section-button-bg: var(--wp--preset--color--primary);
	--section-button-text: var(--wp--preset--color--surface);
	--section-border: var(--wp--preset--color--outline);

	background-color: var(--section-bg);
	color: var(--section-text);
}

/* ==========================================================================
   Combo 2 — Dark
   Dark background, light text. Heroes, footers, feature blocks.
   ========================================================================== */

.is-style-combo-2 {
	--section-bg: var(--wp--preset--color--contrast);
	--section-heading: var(--wp--preset--color--base);
	--section-text: var(--wp--preset--color--primary-light);
	--section-link: var(--wp--preset--color--primary-light);
	--section-button-bg: var(--wp--preset--color--primary);
	--section-button-text: var(--wp--preset--color--surface);
	--section-border: var(--wp--preset--color--muted);

	background-color: var(--section-bg);
	color: var(--section-text);
}

/* ==========================================================================
   Combo 3 — Brand
   Brand-colored background. CTAs, highlight sections, testimonials.
   ========================================================================== */

.is-style-combo-3 {
	--section-bg: var(--wp--preset--color--primary);
	--section-heading: var(--wp--preset--color--surface);
	--section-text: var(--wp--preset--color--surface);
	--section-link: var(--wp--preset--color--accent-light);
	--section-button-bg: var(--wp--preset--color--primary-dark);
	--section-button-text: var(--wp--preset--color--surface);
	--section-border: var(--wp--preset--color--primary-dark);

	background-color: var(--section-bg);
	color: var(--section-text);
}

/* ==========================================================================
   Combo 4 — Subtle
   White/clean background. Alternating sections, feature grids, FAQ.
   ========================================================================== */

.is-style-combo-4 {
	--section-bg: var(--wp--preset--color--surface);
	--section-heading: var(--wp--preset--color--contrast);
	--section-text: var(--wp--preset--color--muted);
	--section-link: var(--wp--preset--color--primary);
	--section-button-bg: var(--wp--preset--color--primary);
	--section-button-text: var(--wp--preset--color--surface);
	--section-border: var(--wp--preset--color--outline);

	background-color: var(--section-bg);
	color: var(--section-text);
}

/* ==========================================================================
   Inheritance Rules
   Child elements pick up section-level properties automatically.
   ========================================================================== */

/* Headings */
[class*="is-style-combo-"] :where(h1, h2, h3, h4, h5, h6) {
	color: var(--section-heading);
}

/* Links */
[class*="is-style-combo-"] :where(a:not(.wp-block-button__link)) {
	color: var(--section-link);
}

/* Buttons */
[class*="is-style-combo-"] :where(.wp-block-button__link) {
	background-color: var(--section-button-bg);
	color: var(--section-button-text);
}

/* Borders on cards/groups inside a combo section */
[class*="is-style-combo-"] :where(.has-border-color) {
	border-color: var(--section-border);
}

/* Separators */
[class*="is-style-combo-"] :where(.wp-block-separator) {
	border-color: var(--section-border);
	background-color: var(--section-border);
}

/* Outline buttons within combos */
[class*="is-style-combo-"] :where(.is-style-outline .wp-block-button__link) {
	background-color: transparent;
	color: var(--section-link);
	border-color: var(--section-link);
}