/**
 * 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). */
.gene-palette--blue,
.gene-section-builder-output:not([class*="gene-palette--"]) {
	--gene-accent: #4f6fa8;
	--gene-accent-strong: #3c588a;
	--gene-accent-soft: #eaf0f8;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #d7e0ee;
	--gene-accent-rgb: 79, 111, 168;
}

.gene-palette--emerald {
	--gene-accent: #5c8a72;
	--gene-accent-strong: #466b57;
	--gene-accent-soft: #ebf3ee;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #d4e4da;
	--gene-accent-rgb: 92, 138, 114;
}

.gene-palette--violet {
	--gene-accent: #7e72a6;
	--gene-accent-strong: #61567f;
	--gene-accent-soft: #f0edf6;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #ddd6ea;
	--gene-accent-rgb: 126, 114, 166;
}

.gene-palette--rose {
	--gene-accent: #b57385;
	--gene-accent-strong: #8e5868;
	--gene-accent-soft: #f7edf0;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #ecd7de;
	--gene-accent-rgb: 181, 115, 133;
}

.gene-palette--amber {
	--gene-accent: #c28e5e;
	--gene-accent-strong: #9a6f45;
	--gene-accent-soft: #f7f0e7;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #ecdcc8;
	--gene-accent-rgb: 194, 142, 94;
}

.gene-palette--teal {
	--gene-accent: #4f8a8a;
	--gene-accent-strong: #3b6b6b;
	--gene-accent-soft: #e8f2f2;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #cfe5e5;
	--gene-accent-rgb: 79, 138, 138;
}

.gene-palette--charcoal {
	--gene-accent: #5a6473;
	--gene-accent-strong: #3f4753;
	--gene-accent-soft: #eef0f3;
	--gene-on-accent: #ffffff;
	--gene-accent-border: #d6dae1;
	--gene-accent-rgb: 90, 100, 115;
}

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

/* =========================================================================
   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;
}