/**
 * GENE Blocks v2 — Color palettes.
 *
 * Each `.gene-palette--{name}` supplies a small set of ACCENT CSS variables that
 * the section templates consume (via the helper classes below or var() inline).
 * Templates are color-agnostic: the same markup renders in any palette.
 *
 * Tones are intentionally MUTED / eye-friendly (lower saturation, mid lightness)
 * so accents support the content without glare. Background / body text stay
 * theme-driven; palettes only tint the accent layer.
 *
 * Variables:
 *   --gene-accent         primary accent (buttons, links, highlights, bars)
 *   --gene-accent-strong  darker accent (hover / active / emphasis)
 *   --gene-accent-soft    very light tint (section bands, card fills)
 *   --gene-on-accent      readable text on an accent fill (white)
 *   --gene-accent-border  soft border derived from the accent
 *
 * @package GENE Blocks
 */

/* Default = blue (the wrapper always carries a gene-palette--* class, but this
   guards against a missing class). */
/* Confident flat accents (v3.6 — replaces the muted v2 tones). Each accent is a
   saturated, decisive color; -strong is a darker hover; -soft a very light tint
   for bands/fills; -border a light hairline tint. White on the accent clears
   large-text contrast; amber's on-accent is a deep amber so text stays legible. */
.gene-palette--blue,
.gene-section-builder-output:not([class*="gene-palette--"]) {
	--gene-accent: #2563eb;
	--gene-accent-strong: #1d4ed8;
	--gene-accent-soft: #eef3fe;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #d2e0fc;
	--gene-accent-rgb: 37, 99, 235;
}

.gene-palette--emerald {
	--gene-accent: #059669;
	--gene-accent-strong: #047857;
	--gene-accent-soft: #e7f6ef;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #c5e9d8;
	--gene-accent-rgb: 5, 150, 105;
}

.gene-palette--violet {
	--gene-accent: #7c3aed;
	--gene-accent-strong: #6d28d9;
	--gene-accent-soft: #f3ecfe;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #e0d0fb;
	--gene-accent-rgb: 124, 58, 237;
}

.gene-palette--rose {
	--gene-accent: #db2777;
	--gene-accent-strong: #be185d;
	--gene-accent-soft: #fce8f1;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #f7cce0;
	--gene-accent-rgb: 219, 39, 119;
}

.gene-palette--amber {
	--gene-accent: #f59e0b;
	--gene-accent-strong: #d97706;
	--gene-accent-soft: #fbf1de;
	--gene-on-accent: #3d2a09;
	--gene-accent-border: #f6deb0;
	--gene-accent-rgb: 245, 158, 11;
}

.gene-palette--teal {
	--gene-accent: #0d9488;
	--gene-accent-strong: #0f766e;
	--gene-accent-soft: #e6f5f3;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #c2e7e2;
	--gene-accent-rgb: 13, 148, 136;
}

.gene-palette--charcoal {
	--gene-accent: #1f2933;
	--gene-accent-strong: #111820;
	--gene-accent-soft: #eef1f4;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #d4dae1;
	--gene-accent-rgb: 31, 41, 51;
}

/* blue 同義（クラス明示時） */
.gene-palette--blue {
	--gene-accent-rgb: 37, 99, 235;
}

/* =========================================================================
   Accent helper classes — templates use these so markup stays color-agnostic.
   They read the palette variables set above.
   ========================================================================= */

.gene-accent-bg {
	background-color: var(--gene-accent) !important;
	color: var(--gene-on-accent) !important;
}

.gene-accent-bg :where(h1, h2, h3, h4, h5, h6, p, a) {
	color: var(--gene-on-accent) !important;
}

.gene-accent-strong-bg {
	background-color: var(--gene-accent-strong) !important;
	color: var(--gene-on-accent) !important;
}

.gene-accent-soft-bg {
	background-color: var(--gene-accent-soft) !important;
}

.gene-accent-text {
	color: var(--gene-accent) !important;
}

.gene-accent-border {
	border-color: var(--gene-accent-border) !important;
}

/* Accent button — core/button with this class fills with the palette accent. */
.gene-btn-accent .wp-block-button__link,
.wp-block-button.gene-btn-accent .wp-block-button__link {
	background-color: var(--gene-accent) !important;
	color: var(--gene-on-accent) !important;
	border-color: var(--gene-accent) !important;
}

.gene-btn-accent .wp-block-button__link:hover,
.wp-block-button.gene-btn-accent .wp-block-button__link:hover {
	background-color: var(--gene-accent-strong) !important;
	border-color: var(--gene-accent-strong) !important;
}

/* Accent outline button. */
.gene-btn-accent-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--gene-accent) !important;
	border: 1px solid var(--gene-accent) !important;
}

.gene-btn-accent-outline .wp-block-button__link:hover {
	background-color: var(--gene-accent) !important;
	color: var(--gene-on-accent) !important;
}