/*
 * KetoArab 2026 — color modes (6)
 * Light (avocado) is the default and lives in theme.json (the color presets).
 * Each mode below overrides the theme.json color preset CUSTOM PROPERTIES, plus
 * a few --ka-* extras (eyebrow/chip/accent2/glow/logo-chip) the components read.
 * Because templates reference colors via var(--wp--preset--color--*), redefining
 * those variables re-themes the whole site. Selector :root[data-mode="…"] (0,2,0)
 * outranks WordPress' global :root (0,1,0).
 *
 * Three families × light/dark:
 *   avocado:  (light = default) / dark
 *   claude:   sepia / sepiadark
 *   blue:     blue (ketodietapp) / navy
 */

/* ---------- light extras (avocado default) ---------- */
:root {
	--ka-eyebrow: #43560F;
	--ka-chip: #3F5417;
	--ka-accent2: #6D8A26;
	--ka-glow: rgba(168, 202, 89, 0.22);
	--ka-logo-chip: transparent;
}

/* ---------- DARK (avocado) ---------- */
:root[data-mode="dark"] {
	--wp--preset--color--base: #14180F;
	--wp--preset--color--surface: #1E2516;
	--wp--preset--color--surface-2: #181D11;
	--wp--preset--color--contrast: #E7ECDC;
	--wp--preset--color--contrast-muted: #9FAA8C;
	--wp--preset--color--heading: #EFE9D4;
	--wp--preset--color--primary: #56711F;
	--wp--preset--color--primary-strong: #A8CA59;
	--wp--preset--color--primary-soft: rgba(168, 202, 89, 0.16);
	--wp--preset--color--accent: #A8CA59;
	--wp--preset--color--border: #2E3723;
	--wp--preset--color--panel: #0E120A;
	--wp--preset--color--panel-text: #FFFFFF;
	--wp--preset--color--panel-muted: #BFC9AC;
	--ka-eyebrow: #C7E08A;
	--ka-chip: #C7E08A;
	--ka-accent2: #6D8A26;
	--ka-glow: rgba(168, 202, 89, 0.20);
	--ka-logo-chip: #ffffff;
	--wp--custom--shadow--soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
	--wp--custom--shadow--strong: 0 4px 12px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

/* ---------- SEPIA (Claude / Anthropic, light) ---------- */
:root[data-mode="sepia"] {
	--wp--preset--color--base: #FAF9F5;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-2: #EFEBDF;
	--wp--preset--color--contrast: #26221B;
	--wp--preset--color--contrast-muted: #6E685C;
	--wp--preset--color--heading: #2A211B;
	--wp--preset--color--primary: #B5512F;
	--wp--preset--color--primary-strong: #963E22;
	--wp--preset--color--primary-soft: #F6E7DF;
	--wp--preset--color--accent: #D97757;
	--wp--preset--color--border: #E3DECF;
	--wp--preset--color--panel: #141413;
	--wp--preset--color--panel-text: #FAF9F5;
	--wp--preset--color--panel-muted: #B0AEA5;
	--ka-eyebrow: #9A3F22;
	--ka-chip: #9A3F22;
	--ka-accent2: #E2A07C;
	--ka-glow: rgba(217, 119, 87, 0.18);
	--ka-logo-chip: transparent;
	color-scheme: light;
}

/* ---------- SEPIA DARK (Claude dark) ---------- */
:root[data-mode="sepiadark"] {
	--wp--preset--color--base: #1A1613;
	--wp--preset--color--surface: #231D18;
	--wp--preset--color--surface-2: #1C1714;
	--wp--preset--color--contrast: #ECE5DB;
	--wp--preset--color--contrast-muted: #A89E90;
	--wp--preset--color--heading: #F4ECE0;
	--wp--preset--color--primary: #B0512C;
	--wp--preset--color--primary-strong: #E08C63;
	--wp--preset--color--primary-soft: rgba(217, 119, 87, 0.18);
	--wp--preset--color--accent: #E08C63;
	--wp--preset--color--border: #332A22;
	--wp--preset--color--panel: #100D0A;
	--wp--preset--color--panel-text: #FAF9F5;
	--wp--preset--color--panel-muted: #BDB3A6;
	--ka-eyebrow: #E89B7C;
	--ka-chip: #EAA886;
	--ka-accent2: #C98050;
	--ka-glow: rgba(217, 119, 87, 0.18);
	--ka-logo-chip: #ffffff;
	--wp--custom--shadow--soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
	--wp--custom--shadow--strong: 0 4px 12px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

/* ---------- BLUE (ketodietapp, light) ---------- */
:root[data-mode="blue"] {
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-2: #F1F4F7;
	--wp--preset--color--contrast: #333333;
	--wp--preset--color--contrast-muted: #5C636A;
	--wp--preset--color--heading: #094E82;
	--wp--preset--color--primary: #1068AB;
	--wp--preset--color--primary-strong: #094E82;
	--wp--preset--color--primary-soft: #E3F1FC;
	--wp--preset--color--accent: #339FF1;
	--wp--preset--color--border: #D6DEE6;
	--wp--preset--color--panel: #094E82;
	--wp--preset--color--panel-text: #FFFFFF;
	--wp--preset--color--panel-muted: #BAD3E9;
	--ka-eyebrow: #0C6BB0;
	--ka-chip: #0C5A93;
	--ka-accent2: #56B0F2;
	--ka-glow: rgba(51, 159, 241, 0.14);
	--ka-logo-chip: transparent;
	color-scheme: light;
}

/* ---------- NAVY (blue dark) ---------- */
:root[data-mode="navy"] {
	--wp--preset--color--base: #0E1A28;
	--wp--preset--color--surface: #152437;
	--wp--preset--color--surface-2: #10202F;
	--wp--preset--color--contrast: #D8E4F0;
	--wp--preset--color--contrast-muted: #90A6BC;
	--wp--preset--color--heading: #EAF3FB;
	--wp--preset--color--primary: #0F69AE;
	--wp--preset--color--primary-strong: #56B0F2;
	--wp--preset--color--primary-soft: rgba(51, 159, 241, 0.16);
	--wp--preset--color--accent: #56B0F2;
	--wp--preset--color--border: #274157;
	--wp--preset--color--panel: #081320;
	--wp--preset--color--panel-text: #FFFFFF;
	--wp--preset--color--panel-muted: #9DB4CA;
	--ka-eyebrow: #6FC0F2;
	--ka-chip: #9FD4F7;
	--ka-accent2: #2E86C8;
	--ka-glow: rgba(51, 159, 241, 0.18);
	--ka-logo-chip: #ffffff;
	--wp--custom--shadow--soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
	--wp--custom--shadow--strong: 0 4px 12px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}

/* ----------------------------------------------------------------
   Dark-mode foreground overrides (WCAG AA)
   In the 3 dark modes --primary is a DARK tone, so using it as a
   FOREGROUND (icon tiles / numbers / pill text) on dark or tinted
   surfaces fails 4.5:1. Mirror the approved mockup, which paints these
   with the LIGHT accent on dark surfaces (e.g. `.feat .ic{color:var(--lime)}`).
   Same treatment the article byline avatar already uses.
   ---------------------------------------------------------------- */
:root[data-mode="dark"] .ka-feature__ic,
:root[data-mode="sepiadark"] .ka-feature__ic,
:root[data-mode="navy"] .ka-feature__ic,
:root[data-mode="dark"] .ka-cat__ic,
:root[data-mode="sepiadark"] .ka-cat__ic,
:root[data-mode="navy"] .ka-cat__ic,
:root[data-mode="dark"] .ka-recipe__mi-ic,
:root[data-mode="sepiadark"] .ka-recipe__mi-ic,
:root[data-mode="navy"] .ka-recipe__mi-ic,
:root[data-mode="dark"] .ka-nutrition__num,
:root[data-mode="sepiadark"] .ka-nutrition__num,
:root[data-mode="navy"] .ka-nutrition__num,
:root[data-mode="dark"] .ka-slider-val,
:root[data-mode="sepiadark"] .ka-slider-val,
:root[data-mode="navy"] .ka-slider-val {
	color: var(--wp--preset--color--accent);
}

/* ---------- cross-mode transition ---------- */
body,
.wp-block-group,
.ka-card,
.wp-block-button__link,
.wp-block-search__input,
.ka-mode-switch,
.ka-mode-btn {
	transition:
		background-color var(--wp--custom--transition--base, 260ms) var(--wp--custom--transition--ease, ease),
		border-color var(--wp--custom--transition--base, 260ms) var(--wp--custom--transition--ease, ease),
		color var(--wp--custom--transition--base, 260ms) var(--wp--custom--transition--ease, ease);
}

@media (prefers-reduced-motion: reduce) {
	body,
	.wp-block-group,
	.ka-card,
	.wp-block-button__link,
	.wp-block-search__input,
	.ka-mode-switch,
	.ka-mode-btn {
		transition: none;
	}
}

/* ---------- mode switcher UI (dropdown) ---------- */
.ka-mode-switch {
	position: relative;
	display: inline-block;
}

.ka-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.ka-mode-toggle:hover {
	border-color: var(--wp--preset--color--accent);
}

.ka-mode-toggle__caret {
	font-size: 0.7rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* sun (light families) / moon (dark families) toggle icon */
.ka-mode-toggle .ka-mode-ico { display: inline-flex; align-items: center; }
.ka-mode-toggle .ka-ico-sun { display: block; }
.ka-mode-toggle .ka-ico-moon { display: none; }
:root[data-mode="dark"] .ka-mode-toggle .ka-ico-sun,
:root[data-mode="sepiadark"] .ka-mode-toggle .ka-ico-sun,
:root[data-mode="navy"] .ka-mode-toggle .ka-ico-sun { display: none; }
:root[data-mode="dark"] .ka-mode-toggle .ka-ico-moon,
:root[data-mode="sepiadark"] .ka-mode-toggle .ka-ico-moon,
:root[data-mode="navy"] .ka-mode-toggle .ka-ico-moon { display: block; }

.ka-mode-menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	z-index: 60;
	min-width: 168px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--strong);
}

.ka-mode-menu[hidden] {
	display: none;
}

.ka-mode-btn {
	display: block;
	width: 100%;
	margin: 0;
	text-align: start;
	font-family: inherit;
	font-size: 0.9rem;
	padding: 0.5rem 0.7rem;
	min-height: 44px;
	cursor: pointer;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.ka-mode-btn:hover {
	background: var(--wp--preset--color--surface-2);
}

.ka-mode-btn[aria-pressed="true"] {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ka-mode-toggle:focus-visible,
.ka-mode-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- heading-font picker (inside the same dropdown) ---------- */
.ka-mode-menu {
	min-width: 236px;
}
.ka-menu-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0.55rem 0.5rem 0.35rem;
}
.ka-menu-label:first-child {
	margin-top: 0.1rem;
}
.ka-font-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 0.3rem 0.2rem;
}
.ka-font-btn {
	font-size: 0.82rem;
	line-height: 1;
	padding: 0.45rem 0.7rem;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ka-font-btn:hover {
	border-color: var(--wp--preset--color--accent);
}
.ka-font-btn[aria-pressed="true"] {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.ka-font-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}