/*
 * COS Woo Theme — базовые компоненты (нейтральный слой).
 * Всё на токенах из tokens.css. Конкретная стилистика приходит с дизайном (фаза H).
 */

/* --- Контейнеры --- */
.cwt-container {
	width: 100%;
	max-width: var(--cwt-container);
	margin-inline: auto;
	padding-inline: var(--cwt-gutter);
}

.cwt-container--narrow {
	max-width: var(--cwt-container-narrow);
}

.cwt-container--wide {
	max-width: var(--cwt-container-wide);
}

.cwt-section {
	padding-block: var(--cwt-section-y);
}

/* --- Типографика --- */
.cwt-main h1,
.entry-title {
	font-family: var(--cwt-font-heading);
	font-size: var(--cwt-text-3xl);
	line-height: var(--cwt-leading-tight);
	color: var(--cwt-color-text);
	margin: 0 0 var(--cwt-space-5);
}

.cwt-main h2 {
	font-family: var(--cwt-font-heading);
	font-size: var(--cwt-text-2xl);
	line-height: var(--cwt-leading-tight);
	color: var(--cwt-color-text);
}

.cwt-main h3 {
	font-size: var(--cwt-text-xl);
	color: var(--cwt-color-text);
}

.cwt-main p,
.cwt-main li {
	color: var(--cwt-color-text-soft);
}

/* --- Кнопки --- */
.cwt-btn,
.cwt-main .button,
.cwt-main button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cwt-space-2);
	min-height: var(--cwt-cta-h);
	padding-inline: var(--cwt-cta-pad-x);
	border-radius: var(--cwt-cta-radius);
	font-family: var(--cwt-font-ui);
	font-size: var(--cwt-cta-fs);
	font-weight: var(--cwt-cta-fw);
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background var(--cwt-transition), color var(--cwt-transition), border-color var(--cwt-transition);
	text-decoration: none;
}

.cwt-btn--primary,
.cwt-main .button {
	background: var(--cwt-color-accent);
	color: var(--cwt-color-on-accent);
}

.cwt-btn--primary:hover,
.cwt-main .button:hover {
	background: var(--cwt-color-accent-hover);
	color: var(--cwt-color-on-accent);
}

.cwt-btn--secondary {
	background: var(--cwt-color-bg);
	color: var(--cwt-color-text);
	border-color: var(--cwt-color-border-strong);
}

.cwt-btn--secondary:hover {
	background: var(--cwt-color-surface);
}

.cwt-btn--dark {
	background: var(--cwt-color-dark);
	color: var(--cwt-color-on-dark);
}

/* --- Карточки --- */
.cwt-card {
	background: var(--cwt-color-bg);
	border: 1px solid var(--cwt-color-border);
	border-radius: var(--cwt-radius-lg);
	padding: var(--cwt-space-6);
	box-shadow: var(--cwt-shadow-sm);
}

/* --- Формы --- */
.cwt-main input[type="text"],
.cwt-main input[type="email"],
.cwt-main input[type="search"],
.cwt-main input[type="tel"],
.cwt-main input[type="number"],
.cwt-main input[type="password"],
.cwt-main select,
.cwt-main textarea {
	width: 100%;
	min-height: var(--cwt-cta-h);
	padding: var(--cwt-space-3) var(--cwt-space-4);
	background: var(--cwt-color-surface);
	border: 1px solid var(--cwt-color-border-strong);
	border-radius: var(--cwt-radius-md);
	font-family: var(--cwt-font-text);
	font-size: var(--cwt-text-base);
	color: var(--cwt-color-text);
}

/* --- Badges --- */
.cwt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.7em;
	border-radius: var(--cwt-radius-pill);
	background: color-mix(in srgb, var(--cwt-color-accent) 18%, transparent);
	color: var(--cwt-color-accent-deep);
	font-size: var(--cwt-text-xs);
	font-weight: 600;
}