/* =====================================================================
   KK — base element treatments (front end + editor)
   ---------------------------------------------------------------------
   Shared by the front end and the block editor canvas. The actual
   light/dark/system *switching* lives in color-modes.css, which is
   loaded ONLY on the front end — so the editor stays on the canonical
   dark theme.json palette regardless of the author's OS setting.
   ===================================================================== */

:root {
	color-scheme: dark;
	--kk-glow: 0 0 8px var(--wp--preset--color--accent);
	--kk-selection-text: var(--wp--preset--color--base);
}

/* Smooth the cross-fade when the visitor toggles (added after first paint
   by JS so the initial render is instant; never for reduced-motion). */
.kk-mode-ready :where(
	body, .wp-site-blocks, .kk-topbar-inner, .kk-footer,
	.kk-theme-toggle, .kk-tt-btn,
	.is-style-kk-callout, .wp-block-quote, .is-style-kk-card,
	.kk-track-grid, .kk-track-item, .kk-portrait,
	.is-style-kk-avatar .wp-block-button__link, .wp-block-separator
) {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.kk-mode-ready :where(body, .wp-site-blocks, .kk-topbar-inner, .kk-footer,
		.kk-theme-toggle, .kk-tt-btn, .is-style-kk-callout, .wp-block-quote,
		.is-style-kk-card, .kk-track-grid, .kk-track-item, .kk-portrait,
		.is-style-kk-avatar .wp-block-button__link, .wp-block-separator) {
		transition: none;
	}
}

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--kk-selection-text);
}

/* Inline emphasis follows the editorial system:
   strong = full-contrast, em/cite = the serif teal accent. */
strong, b { color: var(--wp--preset--color--contrast); font-weight: 600; }

em, i, cite {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--source-serif);
	font-style: italic;
}
/* …but don't recolor emphasis that already lives inside an accent context. */
.has-accent-color em, .has-accent-color i,
a em, a i { color: inherit; font-family: inherit; }

/* Accent the italic word in a headline (e.g. the post title) with the serif. */
:where(h1, h2, h3, .wp-block-post-title) em,
:where(h1, h2, h3, .wp-block-post-title) i {
	font-family: var(--wp--preset--font-family--source-serif);
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}

/* The "Accent" inline format (toolbar) + the same look for <em> in titles:
   serif, italic, teal — the design's highlighted-word treatment. */
.kk-accent {
	font-family: var(--wp--preset--font-family--source-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}

/* Keyboard focus ring in the brand accent. */
:where(a, button, input, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Themed scrollbar (WebKit). */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--base); }
::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--line-bright);
	border: 3px solid var(--wp--preset--color--base);
	border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--accent-dim); }

/* Screen-reader-only utility (used by the theme toggle's live region). */
.kk-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}