/* Fahrzeugkontor framework: tokens, themes and presentation presets. */
.fk-site-main,
.fk-site-main * {
	box-sizing: border-box;
}

/*
 * A small, scoped baseline keeps theme and builder resets from changing
 * Fahrzeugkontor components. Component rules below remain the source of truth.
 */
.fk-site-main :where( h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol ) {
	margin: 0;
}

.fk-site-main :where( h1, h2, h3, h4, h5, h6 ) {
	color: var( --fk-color-heading );
	font-family: var( --fk-font-heading );
	font-weight: var( --fk-font-weight-heading );
}

.fk-site-main :where( ul, ol ) {
	padding: 0;
}

.fk-site-main :where( a ) {
	color: inherit;
	text-decoration: none;
}

.fk-site-main :where( button, input, optgroup, select, textarea ) {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
}

.fk-site-main :where( button, [type="button"], [type="submit"], [type="reset"] ) {
	appearance: none;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: inherit;
}

.fk-site-main :where( img ) {
	max-width: 100%;
	border: 0;
}

.fk-site-main {
	/* Colors */
	--fk-color-accent: #1f5eff;
	--fk-color-on-accent: #ffffff;
	--fk-color-page: #f7f8fa;
	--fk-color-surface: #ffffff;
	--fk-color-surface-soft: #f1f3f6;
	--fk-color-heading: #141922;
	--fk-color-text: #343b47;
	--fk-color-muted: #687180;
	--fk-color-border: #dde2e8;
	--fk-color-border-strong: #c7ced8;

	/* Root-independent fluid type scale for compatibility with themes and builders. */
	--fk-font-body: inherit;
	--fk-font-heading: inherit;
	--fk-font-button: inherit;
	--fk-font-weight-body: 400;
	--fk-font-weight-heading: 700;
	--fk-font-weight-control: 500;
	--fk-font-weight-button: 600;
	--fk-text-2xs: clamp( 11px, calc( 10.7136px + 0.0893vw ), 12px );
	--fk-text-xs: clamp( 12px, calc( 11.7136px + 0.0893vw ), 13px );
	--fk-text-sm: clamp( 14px, calc( 13.7136px + 0.0893vw ), 15px );
	--fk-text-base: clamp( 16px, calc( 15.4288px + 0.1786vw ), 18px );
	--fk-text-lg: clamp( 18px, calc( 16.8576px + 0.3571vw ), 22px );
	--fk-text-xl: clamp( 22px, calc( 20.2864px + 0.5357vw ), 28px );
	--fk-text-2xl: clamp( 28px, calc( 25.1424px + 0.8929vw ), 38px );
	--fk-text-3xl: clamp( 34px, calc( 30px + 1.25vw ), 48px );
	--fk-text-4xl: clamp( 42px, calc( 34.5712px + 2.3214vw ), 68px );
	--fk-page-title-size: var( --fk-text-3xl );

	/* Fluid spacing for layout rhythm. Compact controls remain deliberately stable. */
	--fk-space-4xs: 2px;
	--fk-space-3xs: 3px;
	--fk-space-2xs: clamp( 4px, calc( 3.4288px + 0.1786vw ), 6px );
	--fk-space-xs: clamp( 8px, calc( 7.4288px + 0.1786vw ), 10px );
	--fk-space-sm: clamp( 12px, calc( 11.4288px + 0.1786vw ), 14px );
	--fk-space-md: clamp( 16px, calc( 15.4288px + 0.1786vw ), 18px );
	--fk-space-lg: clamp( 24px, calc( 22.8576px + 0.3571vw ), 28px );
	--fk-space-xl: clamp( 36px, calc( 33.7136px + 0.7143vw ), 44px );
	--fk-space-2xl: clamp( 44px, calc( 38.2864px + 1.7857vw ), 64px );
	--fk-space-3xl: clamp( 64px, calc( 57.1424px + 2.1429vw ), 88px );
	--fk-space-4xl: clamp( 88px, calc( 78.8576px + 2.8571vw ), 120px );

	/* Shapes and elevation */
	--fk-radius-control: 6px;
	--fk-radius-card: 8px;
	--fk-radius-panel: 10px;
	--fk-radius-media: 7px;
	--fk-shadow-card: 0 1px 2px rgba( 20, 31, 48, 0.05 );
	--fk-shadow-panel: 0 4px 16px rgba( 20, 31, 48, 0.06 );
	--fk-card-border: var( --fk-color-border );
	--fk-component-outline-size: 1px;
	--fk-card-background: var( --fk-color-surface );
	--fk-card-alt-background: var( --fk-color-surface-soft );
	--fk-card-alt-border: var( --fk-color-border );
	--fk-card-alt-shadow: none;

	/* Layout and component dimensions */
	--fk-container-width: 1440px;
	--fk-reading-width: 760px;
	--fk-grid-columns: 3;
	--fk-grid-gap: clamp( 14px, calc( 12.8576px + 0.3571vw ), 18px );
	--fk-card-padding: 18px;
	--fk-button-height: 46px;
	--fk-button-radius: 6px;
	--fk-button-border-width: 1px;
	--fk-button-padding-inline: 18px;
	--fk-button-letter-spacing: 0;
	--fk-button-text-transform: none;
	--fk-button-shadow: none;
	--fk-button-hover-shadow: none;
	--fk-button-hover-transform: none;
	--fk-image-ratio: 4 / 3;
	--fk-detail-title-size: var( --fk-text-2xl );
	--fk-icon-sm: 16px;
	--fk-icon-md: 20px;
	--fk-icon-lg: 24px;
	--fk-motion-duration: 180ms;

	min-width: 0;
	background: var( --fk-color-page );
	color: var( --fk-color-text );
	font-family: var( --fk-font-body );
	font-size: var( --fk-text-base );
	font-weight: var( --fk-font-weight-body );
	line-height: 1.6;
}

.fk-theme--dark {
	--fk-color-page: #101318;
	--fk-color-surface: #181c22;
	--fk-color-surface-soft: #20252d;
	--fk-color-heading: #f5f7fa;
	--fk-color-text: #d9dde3;
	--fk-color-muted: #a6adb8;
	--fk-color-border: #303640;
	--fk-color-border-strong: #434b58;
	--fk-shadow-card: 0 1px 2px rgba( 0, 0, 0, 0.24 );
	--fk-shadow-panel: 0 5px 18px rgba( 0, 0, 0, 0.28 );
	color-scheme: dark;
}

@media ( prefers-color-scheme: dark ) {
	.fk-theme--system {
		--fk-color-page: #101318;
		--fk-color-surface: #181c22;
		--fk-color-surface-soft: #20252d;
		--fk-color-heading: #f5f7fa;
		--fk-color-text: #d9dde3;
		--fk-color-muted: #a6adb8;
		--fk-color-border: #303640;
		--fk-color-border-strong: #434b58;
		--fk-shadow-card: 0 1px 2px rgba( 0, 0, 0, 0.24 );
		--fk-shadow-panel: 0 5px 18px rgba( 0, 0, 0, 0.28 );
		color-scheme: dark;
	}
}