/**
 * Loadena Design System Foundation
 * Neutral tokens, focused utilities, and primitive components.
 */

/* Tokens */
:root {
	--loadena-color-surface: #ffffff;
	--loadena-color-surface-subtle: #f4f6f8;
	--loadena-color-surface-strong: #e7ebef;
	--loadena-color-text: #17212b;
	--loadena-color-text-muted: #52606d;
	--loadena-color-border: #aeb7c1;
	--loadena-color-border-strong: #687583;
	--loadena-color-accent: #175ea8;
	--loadena-color-accent-hover: #104b87;
	--loadena-color-on-accent: #ffffff;
	--loadena-color-info: #175ea8;
	--loadena-color-success: #176b42;
	--loadena-color-warning: #805500;
	--loadena-color-danger: #b42318;
	--loadena-color-disabled: #687583;
	--loadena-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	--loadena-font-size-xs: .75rem;
	--loadena-font-size-sm: .875rem;
	--loadena-font-size-md: 1rem;
	--loadena-font-size-lg: 1.25rem;
	--loadena-font-size-xl: 1.5rem;
	--loadena-font-size-2xl: 2rem;
	--loadena-line-height-tight: 1.25;
	--loadena-line-height-normal: 1.5;
	--loadena-line-height-loose: 1.7;
	--loadena-space-0: 0;
	--loadena-space-1: .25rem;
	--loadena-space-2: .5rem;
	--loadena-space-3: .75rem;
	--loadena-space-4: 1rem;
	--loadena-space-5: 1.5rem;
	--loadena-space-6: 2rem;
	--loadena-space-7: 3rem;
	--loadena-space-8: 4rem;
	--loadena-control-height-sm: 2.25rem;
	--loadena-control-height: 2.75rem;
	--loadena-control-height-lg: 3.25rem;
	--loadena-radius-sm: .25rem;
	--loadena-radius-md: .5rem;
	--loadena-radius-lg: .75rem;
	--loadena-radius-pill: 999px;
	--loadena-shadow-sm: 0 1px 2px rgb(23 33 43 / 12%);
	--loadena-shadow-md: 0 4px 12px rgb(23 33 43 / 16%);
	--loadena-border-width: 1px;
	--loadena-border: var(--loadena-border-width) solid var(--loadena-color-border);
	--loadena-focus-ring: 3px solid #175ea8;
	--loadena-focus-offset: 2px;
	--loadena-transition-duration: 160ms;
	--loadena-width-narrow: 48rem;
	--loadena-width-container: 72rem;
	--loadena-width-wide: 80rem;
}

/* Layout utilities */
.loadena-container { inline-size: min(100% - (2 * var(--loadena-space-4)), var(--loadena-width-container)); margin-inline: auto; }
.loadena-container--narrow { max-inline-size: var(--loadena-width-narrow); }
.loadena-container--wide { max-inline-size: var(--loadena-width-wide); }
.loadena-stack { display: flex; flex-direction: column; gap: var(--loadena-stack-space, var(--loadena-space-4)); }
.loadena-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--loadena-cluster-space, var(--loadena-space-3)); }
.loadena-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--loadena-grid-gap, var(--loadena-space-5)); }
.loadena-section { padding-block: var(--loadena-section-space, var(--loadena-space-7)); }
.loadena-surface { color: var(--loadena-color-text); background: var(--loadena-color-surface); border: var(--loadena-border); border-radius: var(--loadena-radius-md); }
.loadena-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Buttons */
.loadena-button { display: inline-flex; min-block-size: var(--loadena-control-height); align-items: center; justify-content: center; gap: var(--loadena-space-2); padding-inline: var(--loadena-space-4); border: var(--loadena-border); border-radius: var(--loadena-radius-md); color: var(--loadena-color-text); background: var(--loadena-color-surface); font: 600 var(--loadena-font-size-md)/var(--loadena-line-height-tight) var(--loadena-font-family); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--loadena-transition-duration), border-color var(--loadena-transition-duration); }
.loadena-button:hover { background: var(--loadena-color-surface-subtle); }
.loadena-button--primary { color: var(--loadena-color-on-accent); background: var(--loadena-color-accent); border-color: var(--loadena-color-accent); }
.loadena-button--primary:hover { background: var(--loadena-color-accent-hover); border-color: var(--loadena-color-accent-hover); }
.loadena-button--secondary { color: var(--loadena-color-accent); border-color: var(--loadena-color-accent); }
.loadena-button--ghost { border-color: transparent; background: transparent; }
.loadena-button--danger { color: #fff; background: var(--loadena-color-danger); border-color: var(--loadena-color-danger); }
.loadena-button--small { min-block-size: var(--loadena-control-height-sm); padding-inline: var(--loadena-space-3); font-size: var(--loadena-font-size-sm); }
.loadena-button--large { min-block-size: var(--loadena-control-height-lg); padding-inline: var(--loadena-space-5); font-size: var(--loadena-font-size-lg); }
.loadena-button:disabled, .loadena-button[aria-disabled="true"], .loadena-button.is-disabled { opacity: .6; cursor: not-allowed; filter: grayscale(.35); }
.loadena-button.is-loading { cursor: wait; }
.loadena-button.is-loading::before { content: ""; inline-size: 1em; block-size: 1em; border: 2px solid currentcolor; border-inline-end-color: transparent; border-radius: 50%; animation: loadena-spin .8s linear infinite; }

/* Forms */
.loadena-field { display: grid; gap: var(--loadena-space-2); }
.loadena-field__label { color: var(--loadena-color-text); font-weight: 600; line-height: var(--loadena-line-height-normal); }
.loadena-field__help { color: var(--loadena-color-text-muted); font-size: var(--loadena-font-size-sm); }
.loadena-field__error { color: var(--loadena-color-danger); font-size: var(--loadena-font-size-sm); font-weight: 600; }
.loadena-field__error::before { content: "Error: "; }
.loadena-control { box-sizing: border-box; inline-size: 100%; min-block-size: var(--loadena-control-height); padding: var(--loadena-space-2) var(--loadena-space-3); border: var(--loadena-border); border-radius: var(--loadena-radius-sm); color: var(--loadena-color-text); background: var(--loadena-color-surface); font: inherit; line-height: var(--loadena-line-height-normal); }
textarea.loadena-control { min-block-size: 7rem; resize: vertical; }
select.loadena-control { cursor: pointer; }
.loadena-control[type="checkbox"], .loadena-control[type="radio"] { inline-size: 1.25rem; min-block-size: 1.25rem; margin: 0; accent-color: var(--loadena-color-accent); }
.loadena-control[aria-invalid="true"], .loadena-control.is-invalid { border-color: var(--loadena-color-danger); border-width: 2px; }
.loadena-control:disabled { color: var(--loadena-color-disabled); background: var(--loadena-color-surface-strong); cursor: not-allowed; }

/* Cards */
.loadena-card { overflow: hidden; color: var(--loadena-color-text); background: var(--loadena-color-surface); border: var(--loadena-border); border-radius: var(--loadena-radius-lg); box-shadow: var(--loadena-shadow-sm); }
.loadena-card__header, .loadena-card__body, .loadena-card__footer { padding: var(--loadena-space-5); }
.loadena-card__header { border-block-end: var(--loadena-border); }
.loadena-card__footer { background: var(--loadena-color-surface-subtle); border-block-start: var(--loadena-border); }

/* Badges, alerts, and dividers */
.loadena-badge { display: inline-flex; align-items: center; padding: var(--loadena-space-1) var(--loadena-space-2); border: 1px solid currentcolor; border-radius: var(--loadena-radius-pill); color: var(--loadena-color-text-muted); font-size: var(--loadena-font-size-xs); font-weight: 700; line-height: var(--loadena-line-height-tight); }
.loadena-badge--success { color: var(--loadena-color-success); }
.loadena-badge--warning { color: var(--loadena-color-warning); }
.loadena-badge--danger { color: var(--loadena-color-danger); }
.loadena-alert { padding: var(--loadena-space-4); border: var(--loadena-border); border-inline-start: .3rem solid var(--loadena-color-info); border-radius: var(--loadena-radius-md); color: var(--loadena-color-text); background: var(--loadena-color-surface-subtle); }
.loadena-alert::before { content: "Info: "; font-weight: 700; }
.loadena-alert--success { border-inline-start-color: var(--loadena-color-success); }
.loadena-alert--success::before { content: "Success: "; }
.loadena-alert--warning { border-inline-start-color: var(--loadena-color-warning); }
.loadena-alert--warning::before { content: "Warning: "; }
.loadena-alert--danger { border-inline-start-color: var(--loadena-color-danger); }
.loadena-alert--danger::before { content: "Error: "; }
.loadena-divider { block-size: 0; margin-block: var(--loadena-space-5); border: 0; border-block-start: var(--loadena-border); }

/* Interaction and responsive behavior */
.loadena-button:focus-visible, .loadena-control:focus-visible { outline: var(--loadena-focus-ring); outline-offset: var(--loadena-focus-offset); }
@keyframes loadena-spin { to { transform: rotate(360deg); } }
@media (min-width: 40rem) { .loadena-grid { grid-template-columns: repeat(var(--loadena-grid-columns, 2), minmax(0, 1fr)); } }
@media (min-width: 64rem) { .loadena-grid { --loadena-grid-columns: 3; } }
@media (prefers-reduced-motion: reduce) { .loadena-button { transition-duration: .01ms; } .loadena-button.is-loading::before { animation-duration: 1.5s; } }

/* Layout foundation */
.loadena-page {
	--loadena-page-gap: var(--loadena-space-6);
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	gap: var(--loadena-page-gap);
}

.loadena-page__header,
.loadena-page__content,
.loadena-page__footer {
	min-inline-size: 0;
}

.loadena-page__content {
	flex: 1 1 auto;
}

.loadena-region {
	--loadena-region-space: var(--loadena-space-6);
	padding-block: var(--loadena-region-space);
}

.loadena-region--compact {
	--loadena-region-space: var(--loadena-space-4);
}

.loadena-region--spacious {
	--loadena-region-space: var(--loadena-space-8);
}

.loadena-sidebar-layout {
	--loadena-sidebar-gap: var(--loadena-space-6);
	--loadena-sidebar-width: 18rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--loadena-sidebar-gap);
}

.loadena-sidebar-layout__main,
.loadena-sidebar-layout__aside {
	min-inline-size: 0;
}

.loadena-split {
	--loadena-split-gap: var(--loadena-space-6);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--loadena-split-gap);
}

.loadena-auto-grid {
	--loadena-auto-grid-gap: var(--loadena-space-5);
	--loadena-auto-grid-min: min(100%, 16rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--loadena-auto-grid-min)), 1fr));
	gap: var(--loadena-auto-grid-gap);
}

.loadena-reel {
	--loadena-reel-gap: var(--loadena-space-4);
	--loadena-reel-item-size: auto;
	display: flex;
	max-inline-size: 100%;
	gap: var(--loadena-reel-gap);
	padding-block-end: var(--loadena-space-2);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

.loadena-reel > * {
	flex: 0 0 var(--loadena-reel-item-size);
}

.loadena-reel--snap {
	scroll-snap-type: inline proximity;
}

.loadena-reel--snap > * {
	scroll-snap-align: start;
}

.loadena-reel:focus-visible {
	outline: var(--loadena-focus-ring);
	outline-offset: var(--loadena-focus-offset);
}

.loadena-center {
	--loadena-center-size: var(--loadena-width-container);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--loadena-center-size);
	margin-inline: auto;
}

.loadena-center--text {
	--loadena-center-size: var(--loadena-width-narrow);
}

.loadena-cover {
	--loadena-cover-min-size: 24rem;
	--loadena-cover-gap: var(--loadena-space-5);
	display: flex;
	min-block-size: min(var(--loadena-cover-min-size), 100svh);
	flex-direction: column;
	gap: var(--loadena-cover-gap);
}

.loadena-cover > .loadena-cover__centered {
	margin-block: auto;
}

.loadena-frame {
	--loadena-frame-ratio: 1 / 1;
	position: relative;
	inline-size: 100%;
	aspect-ratio: var(--loadena-frame-ratio);
	overflow: hidden;
}

.loadena-frame--square {
	--loadena-frame-ratio: 1 / 1;
}

.loadena-frame--landscape {
	--loadena-frame-ratio: 16 / 9;
}

.loadena-frame--portrait {
	--loadena-frame-ratio: 3 / 4;
}

.loadena-frame > img,
.loadena-frame > video,
.loadena-frame > iframe,
.loadena-frame > picture,
.loadena-frame > picture > img {
	inline-size: 100%;
	block-size: 100%;
}

.loadena-frame > img,
.loadena-frame > video,
.loadena-frame > picture > img {
	object-fit: var(--loadena-frame-fit, cover);
}

.loadena-frame > picture {
	display: block;
}

.loadena-switcher {
	--loadena-switcher-gap: var(--loadena-space-4);
	--loadena-switcher-threshold: 36rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--loadena-switcher-gap);
}

.loadena-switcher > * {
	min-inline-size: 0;
	flex-basis: calc((var(--loadena-switcher-threshold) - 100%) * 999);
	flex-grow: 1;
}

.loadena-full-bleed {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}

.loadena-flow > * + * {
	margin-block-start: var(--loadena-flow-space, var(--loadena-space-4));
}

@media (min-width: 48rem) {
	.loadena-sidebar-layout {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, var(--loadena-sidebar-width));
	}

	.loadena-sidebar-layout--sidebar-start {
		grid-template-columns: minmax(12rem, var(--loadena-sidebar-width)) minmax(0, 1fr);
	}

	.loadena-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.loadena-split--content-dominant {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.loadena-split--media-dominant {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}