/*
 * Kodlo — global stylesheet
 * Baseline refinements + design-token bridge.
 *
 * The section CSS (in each template part) references the WordPress preset
 * custom properties --wp--preset--color--primary / --secondary. In a classic
 * theme WordPress no longer guarantees these are emitted, so we define them
 * here at :root. This keeps the section CSS byte-for-byte identical to the
 * original block-theme markup while making it self-sufficient.
 */

:root {
	--wp--preset--color--primary: #080b0d;
	--wp--preset--color--secondary: #f4f3ee;

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-family: "Inter Tight", "Inter", system-ui, sans-serif;
	font-feature-settings: "ss01", "cv11";
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Full-bleed sections. In the block theme `alignfull` was supplied by core;
   the classic templates keep the class on each <section> so the markup is
   unchanged — this rule restores its edge-to-edge behaviour. */
.alignfull {
	width: 100%;
}

/* Editorial mono labels: small caps tracking */
.is-style-eyebrow,
.has-jetbrains-mono-font-family {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Refined focus ring using theme palette */
:where(a, button, input, select, textarea):focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Selection */
::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ *
 * Section corner plus markers (global)
 *
 * Rendered once per section via parts/section-corners.php. Pinned to
 * the true corners of each full-bleed <section>, a fixed inset from the
 * absolute viewport edge — NOT the content gutter. Inherits the
 * section's text color via currentColor, so it reads on both the ink
 * and cream palettes without per-section overrides.
 *
 * Requires the host <section> to be position: relative.
 * ------------------------------------------------------------------ */
.kodlo-corners {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.kodlo-corners__mark {
	position: absolute;
	width: 13px;
	height: 13px;
	color: inherit;
	opacity: 0.6;
}

.kodlo-corners__mark::before,
.kodlo-corners__mark::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.kodlo-corners__mark::before {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.kodlo-corners__mark::after {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

/* True corners — fixed inset from the section's own edges. */
.kodlo-corners__mark--tl { left: 12px;  top: 12px; }
.kodlo-corners__mark--tr { right: 12px; top: 12px; }
.kodlo-corners__mark--bl { left: 12px;  bottom: 12px; }
.kodlo-corners__mark--br { right: 12px; bottom: 12px; }