/**
 * CompoundWiki shared components, built on the design tokens. Used by Elementor
 * widgets and the theme shell alike. Mobile-first; everything scales up.
 */

/* Layout ------------------------------------------------------------------ */
.cw-container {
	width: 100%;
	max-width: var(--cw-container);
	margin-inline: auto;
	padding-inline: var(--cw-space-4);
}

.cw-grid {
	display: grid;
	gap: var(--cw-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cw-grid--cards {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

/* Card -------------------------------------------------------------------- */
.cw-card {
	background: var(--cw-surface);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius-lg);
	box-shadow: var(--cw-shadow-sm);
	padding: var(--cw-space-5);
	color: var(--cw-text);
	transition: transform var(--cw-transition), box-shadow var(--cw-transition), border-color var(--cw-transition);
}

.cw-card--interactive:hover,
.cw-card--interactive:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--cw-shadow-md);
	border-color: var(--cw-border-strong);
}

/* Badges ------------------------------------------------------------------ */
.cw-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--cw-space-1);
	font-size: var(--cw-text-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 0.375rem 0.625rem;
	border-radius: var(--cw-radius-full);
	background: var(--cw-bg-subtle);
	color: var(--cw-text-muted);
	border: 1px solid transparent;
}

.cw-badge--ok {
	background: var(--cw-ok-soft);
	color: var(--cw-ok);
}

.cw-badge--warn {
	background: var(--cw-warn-soft);
	color: var(--cw-warn);
}

/* Evidence levels */
.cw-badge--limited {
	background: var(--cw-ev-limited-soft);
	color: var(--cw-ev-limited);
}
.cw-badge--emerging {
	background: var(--cw-ev-emerging-soft);
	color: var(--cw-ev-emerging);
}
.cw-badge--well_researched {
	background: var(--cw-ev-well-soft);
	color: var(--cw-ev-well);
}
.cw-badge--fda_approved {
	background: var(--cw-ev-fda-soft);
	color: var(--cw-ev-fda);
}
.cw-badge--extensively_studied {
	background: var(--cw-ev-extensive-soft);
	color: var(--cw-ev-extensive);
}

/* Buttons ----------------------------------------------------------------- */
.cw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cw-space-2);
	font-family: inherit;
	font-size: var(--cw-text-sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.75rem 1.25rem;
	border-radius: var(--cw-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--cw-transition), box-shadow var(--cw-transition), background var(--cw-transition), color var(--cw-transition);
}

.cw-btn:focus-visible {
	outline: none;
	box-shadow: var(--cw-ring);
}

.cw-btn--primary {
	background: var(--cw-btn-primary-bg);
	color: var(--cw-btn-primary-fg);
	box-shadow: var(--cw-btn-primary-shadow);
}

.cw-btn--primary:hover {
	transform: translateY(-1px);
	color: var(--cw-btn-primary-fg);
	filter: brightness(1.06);
}

.cw-btn--ghost {
	background: var(--cw-btn-ghost-bg);
	color: var(--cw-btn-ghost-fg);
	border-color: var(--cw-btn-ghost-border);
}

.cw-btn--ghost:hover {
	border-color: var(--cw-brand);
	color: var(--cw-brand);
	background: var(--cw-brand-soft);
}

/* Gradient text utility --------------------------------------------------- */
.cw-gradient-text {
	background: var(--cw-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Probe widget ------------------------------------------------------------ */
.cw-probe {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cw-space-3);
}

.cw-probe__title {
	margin: 0;
	font-size: var(--cw-text-xl);
	font-weight: 700;
	letter-spacing: var(--cw-tracking-tight);
	color: var(--cw-text);
}

.cw-probe__meta {
	margin: 0;
	font-size: var(--cw-text-sm);
	color: var(--cw-text-muted);
	font-family: var(--cw-font-mono);
}