/* Droubna Core v1.2 UI foundation: tokens and shared primitives.
 * Contract: specs/003-droubna-core-v1.2/contracts/ui-foundation.md */

.droubna-item,
.droubna-catalog {
	--droubna-ink: var(--dr-ink, #200d41);
	--droubna-purple: var(--dr-purple, #7a417b);
	--droubna-plum: var(--dr-plum, #461a3d);
	--droubna-coral: var(--dr-coral, #ff7669);
	--droubna-orange: var(--dr-orange, #fd9055);
	--droubna-blush: var(--dr-blush, #fdf2f4);
	--droubna-rose: var(--dr-rose, #e9d5dc);
	--droubna-body: var(--dr-body, #62586b);
	--droubna-white: var(--dr-white, #ffffff);

	--droubna-text-primary: var(--droubna-ink);
	--droubna-text-secondary: var(--droubna-body);
	--droubna-surface: var(--droubna-white);
	--droubna-surface-soft: var(--droubna-blush);
	--droubna-border: var(--droubna-rose);
	--droubna-accent: var(--droubna-coral);
	--droubna-accent-secondary: var(--droubna-purple);
	--droubna-focus: var(--droubna-purple);
	--droubna-status: var(--droubna-plum);
	--droubna-status-surface: var(--droubna-rose);

	--droubna-font: "Tajawal", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	--droubna-text-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	--droubna-text-section: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	--droubna-text-card: 1.1875rem;
	--droubna-text-body: 1.0625rem;
	--droubna-text-small: 0.9375rem;
	--droubna-text-meta: 0.875rem;
	--droubna-text-badge: 0.8125rem;
	--droubna-text-button: 1rem;
	--droubna-text-crumb: 0.875rem;

	--droubna-space-1: 0.25rem;
	--droubna-space-2: 0.5rem;
	--droubna-space-3: 0.75rem;
	--droubna-space-4: 1rem;
	--droubna-space-5: 1.5rem;
	--droubna-space-6: 2rem;
	--droubna-space-7: 3rem;
	--droubna-space-8: 4rem;

	--droubna-radius-sm: 6px;
	--droubna-radius-md: 12px;
	--droubna-radius-lg: 20px;
	--droubna-radius-pill: 999px;

	--droubna-shadow-none: none;
	--droubna-shadow-subtle: 0 1px 2px rgb(32 13 65 / 0.06);
	--droubna-shadow-elevated: 0 12px 32px rgb(32 13 65 / 0.1);
	--droubna-shadow-panel: 0 10px 28px rgb(32 13 65 / 0.07);
	--droubna-shadow-hover: 0 16px 36px rgb(32 13 65 / 0.12);
	--droubna-shadow-open: 0 8px 20px rgb(32 13 65 / 0.05);
	--droubna-shadow-bar: 0 14px 40px rgb(32 13 65 / 0.18);
	--droubna-shadow-cta: 0 8px 18px rgb(255 118 105 / 0.18);
	--droubna-shadow-cta-hover: 0 11px 22px rgb(255 118 105 / 0.24);
	--droubna-shadow-halo: 0 0 0 4px var(--droubna-soft-coral);

	/* Wazen v3 tints (visual-source-of-truth §3.2) */
	--droubna-panel: #fffdfe;
	--droubna-line: #e9dde2;
	--droubna-line-strong: #dccbd3;
	--droubna-line-soft: #f2e8ec;
	--droubna-line-open: #dcc4d0;
	--droubna-soft-purple: #f4ecf5;
	--droubna-soft-coral: #fff0ee;
	--droubna-tint: #fff9fa;
	--droubna-media-bg: #f3e8eb;
	--droubna-thumb-bg: #fcf2f6;
	--droubna-band-bg: #fbe7eb;
	--droubna-coral-hover: #ff8277;
	--droubna-amber-bg: #fff4d9;
	--droubna-amber-text: #9c5a00;
	--droubna-amber-line: #f7deaa;
	--droubna-tag-coral-bg: #ffe9e5;
	--droubna-tag-coral-text: #a84b42;
	--droubna-tag-pink-bg: #ffe8f0;
	--droubna-tag-pink-text: #a74469;
	--droubna-tag-purple-bg: #efe6f4;
	--droubna-tag-purple-text: #6d3b70;
	--droubna-text-list: #54435f;
	--droubna-text-card-ink: #453352;
	--droubna-text-check: #5f4f69;
	--droubna-text-summary-list: #55455f;

	--droubna-container: var(--dr-container, 1180px);
	--droubna-gutter: 1rem;
	--droubna-measure: 68ch;
	--droubna-transition: 150ms ease;

	color: var(--droubna-text-primary);
	line-height: 1.75;
}

@media (min-width: 48em) {
	.droubna-item,
	.droubna-catalog {
		--droubna-gutter: 1.5rem;
	}
}

:is(.droubna-item,.droubna-catalog) *,
:is(.droubna-item,.droubna-catalog) ::before,
:is(.droubna-item,.droubna-catalog) ::after {
	box-sizing: border-box;
}

/* The ID guard beats theme resets; stretched cards draw their ring in ::after. */
:is(.droubna-item,.droubna-catalog) :focus-visible:is(#_, *):not(:where(.droubna-summary-card__title)) {
	outline: 3px solid var(--droubna-focus);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	:is(.droubna-item,.droubna-catalog) :focus-visible:is(#_, *):not(:where(.droubna-summary-card__title)) {
		outline-color: Highlight;
	}
}

/* F-04..F-06 CTA; secondary states live in the surface files. */
:is(.droubna-item,.droubna-catalog) .droubna-cta {
	align-items: center;
	background: var(--droubna-surface);
	border: 2px solid var(--droubna-accent-secondary);
	color: var(--droubna-accent-secondary);
	display: inline-flex;
	font-size: var(--droubna-text-button);
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	min-inline-size: 44px;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	text-decoration: none;
}

:is(.droubna-item,.droubna-catalog) .droubna-cta--action {
	background: var(--droubna-coral);
	border-color: var(--droubna-coral);
	color: var(--droubna-ink);
}

:is(.droubna-item,.droubna-catalog) .droubna-cta--action:is(:hover,:focus) {
	background: var(--droubna-orange);
	border-color: var(--droubna-orange);
	color: var(--droubna-ink);
}

/* F-07..F-12 badges, status */
:is(.droubna-item,.droubna-catalog) .droubna-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--droubna-space-2);
	list-style: none;
	margin: 0 0 var(--droubna-space-3);
	padding: 0;
}

:is(.droubna-item,.droubna-catalog) :is(.droubna-badge,.droubna-status) {
	align-items: center;
	border-radius: var(--droubna-radius-pill);
	display: inline-flex;
	font-weight: 700;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: var(--droubna-space-1) var(--droubna-space-3);
}

:is(.droubna-item,.droubna-catalog) :is(.droubna-badge--type,.droubna-badge--access) {
	background: var(--droubna-surface-soft);
	color: var(--droubna-accent-secondary);
}

:is(.droubna-item,.droubna-catalog) .droubna-badge--start {
	background: var(--droubna-orange);
	color: var(--droubna-ink);
}

:is(.droubna-item,.droubna-catalog) .droubna-badge--availability {
	padding: 0;
}

:is(.droubna-item,.droubna-catalog) .droubna-status {
	background: var(--droubna-status-surface);
	color: var(--droubna-status);
	margin: 0;
	pointer-events: none;
}

.droubna-item .droubna-section__heading,
.droubna-catalog .droubna-catalog__section > h2,
.droubna-catalog .droubna-featured__title {
	color: var(--droubna-text-primary);
	font-size: var(--droubna-text-section);
	line-height: 1.3;
	margin: 0;
}

.droubna-catalog .droubna-card__inner,
.droubna-catalog .droubna-featured,
.droubna-item .droubna-summary-card {
	background: var(--droubna-surface);
	border: 1px solid var(--droubna-border);
	border-radius: var(--droubna-radius-md);
}

.droubna-item .droubna-item__visual,
.droubna-catalog .droubna-card__media,
.droubna-catalog .droubna-featured__media {
	background: var(--droubna-surface-soft);
	border-radius: var(--droubna-radius-md);
	overflow: hidden;
}

.droubna-item .droubna-item__visual img,
.droubna-catalog :is(.droubna-card__media,.droubna-featured__media) img {
	display: block;
	width: 100%;
}

.droubna-item .droubna-facts__label {
	color: var(--droubna-text-secondary);
}

:is(.droubna-item,.droubna-catalog) .droubna-cta,
.droubna-catalog .droubna-catalog__filters button {
	transition: var(--droubna-transition);
	transition-property: color, background-color, border-color;
}

@media (prefers-reduced-motion: reduce) {
	:is(.droubna-item,.droubna-catalog) *,
	:is(.droubna-item,.droubna-catalog) ::before,
	:is(.droubna-item,.droubna-catalog) ::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}