/**
 * Kijuju design foundation.
 *
 * Keep this file small. Larger components will later be split into dedicated
 * files and enqueued from inc/assets.php.
 */

:root {
	--kijuju-color-ink: #111111;
	--kijuju-color-paper: #f4efe5;
	--kijuju-color-surface: #ffffff;
	--kijuju-color-accent: #f15a2a;
	--kijuju-color-accent-dark: #c9421b;
	--kijuju-color-muted: #626262;
	--kijuju-color-border: #d8d2c7;

	--kijuju-radius-small: 0.375rem;
	--kijuju-radius-medium: 0.75rem;
	--kijuju-shadow-card: 0 0.75rem 2rem rgb(17 17 17 / 8%);

	--kijuju-content-width: 75rem;
	--kijuju-reading-width: 48rem;
	--kijuju-section-space: clamp(3.5rem, 8vw, 7.5rem);

	/*
	 * Kleinste unterstützte Layoutbreite.
	 *
	 * Verhindert, dass die gesamte Gestaltung auf extrem
	 * schmalen Viewports immer weiter zusammengedrückt wird.
	 */
	--kijuju-site-min-width: 320px;

	--kijuju-font-sans:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;
	--kijuju-site-min-width: 366px;
}

html,
body,
#main-container {
	min-width: var(--kijuju-site-min-width);
}


/* =========================================================
   Globales Seitenlayout
   ========================================================= */

html,
body {
	min-width: var(--kijuju-site-min-width);
}


/* =========================================================
   Fokusdarstellung
   ========================================================= */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 0.1875rem solid var(--kijuju-color-accent);
	outline-offset: 0.1875rem;
}


/* =========================================================
   Grundlegende Layout-Helfer
   ========================================================= */

.kijuju-section {
	padding-block: var(--kijuju-section-space);
}

.kijuju-reading-width {
	max-width: var(--kijuju-reading-width);
}

.kijuju-card {
	border: 1px solid var(--kijuju-color-border);
	border-radius: var(--kijuju-radius-medium);
	background: var(--kijuju-color-surface);
	box-shadow: var(--kijuju-shadow-card);
}


/* =========================================================
   Typografie
   ========================================================= */

body,
button,
input,
select,
textarea {
	font-family: var(--kijuju-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--kijuju-font-sans);
	font-weight: 800;
	letter-spacing: -0.025em;
}