/* Drumix Design Tokens — единый визуальный источник пользовательских экранов. */
:root {
	/* Цвета */
	--drumix-color-primary: #0066cc;
	--drumix-color-primary-hover: #0057ad;
	--drumix-color-primary-soft: rgba(0, 102, 204, .10);
	--drumix-color-focus: #0a84ff;
	--drumix-color-on-primary: #ffffff;
	--drumix-color-background: #f5f5f7;
	--drumix-color-surface: #ffffff;
	--drumix-color-surface-soft: #f0f2f5;
	--drumix-color-surface-raised: #ffffff;
	--drumix-color-border: rgba(29, 29, 31, .12);
	--drumix-color-text: #1d1d1f;
	--drumix-color-muted: #626269;
	--drumix-color-success: #207a4f;
	--drumix-color-success-soft: rgba(32, 122, 79, .11);
	--drumix-color-warning: #855900;
	--drumix-color-warning-soft: rgba(133, 89, 0, .11);
	--drumix-color-danger: #b42318;
	--drumix-color-danger-soft: rgba(180, 35, 24, .10);
	--drumix-color-warm: #c94b1e;
	--drumix-color-warm-soft: rgba(201, 75, 30, .10);
	--drumix-color-overlay: rgba(20, 22, 27, .58);

	/* Типографика */
	--drumix-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	--drumix-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
	--drumix-text-body-size: 15px;
	--drumix-text-body-line: 1.5;
	--drumix-text-small-size: 13px;
	--drumix-text-caption-size: 12px;
	--drumix-weight-regular: 400;
	--drumix-weight-medium: 650;
	--drumix-weight-strong: 780;

	/* Размеры и геометрия */
	--drumix-space-1: 4px;
	--drumix-space-2: 8px;
	--drumix-space-3: 12px;
	--drumix-space-4: 16px;
	--drumix-space-5: 20px;
	--drumix-space-6: 24px;
	--drumix-space-8: 32px;
	--drumix-space-12: 48px;
	--drumix-radius-small: 10px;
	--drumix-radius-control: 12px;
	--drumix-radius-card: 20px;
	--drumix-radius-large: 28px;
	--drumix-radius-round: 999px;
	--drumix-control-height: 48px;
	--drumix-control-height-compact: 40px;
	--drumix-icon-control-size: 44px;
	--drumix-card-padding: 20px;

	/* Глубина и движение */
	--drumix-shadow-card: 0 8px 28px rgba(24, 35, 52, .07);
	--drumix-shadow-raised: 0 18px 54px rgba(24, 35, 52, .14);
	--drumix-shadow-primary: 0 8px 22px rgba(0, 102, 204, .22);
	--drumix-motion-fast: 140ms;
	--drumix-motion-normal: 200ms;
	--drumix-motion-ease: cubic-bezier(.2, .8, .2, 1);
	--drumix-layer-header: 40;
	--drumix-layer-navigation: 1000;
	--drumix-layer-overlay: 5200;
}

html.pb-public-dark,
body.pb-student-dark {
	--drumix-color-primary: #0a66c2;
	--drumix-color-primary-hover: #0758a8;
	--drumix-color-primary-soft: rgba(94, 169, 255, .16);
	--drumix-color-focus: #64a9ff;
	--drumix-color-background: #0d0d0f;
	--drumix-color-surface: #1c1c1e;
	--drumix-color-surface-soft: #27272a;
	--drumix-color-surface-raised: #2c2c2e;
	--drumix-color-border: rgba(255, 255, 255, .14);
	--drumix-color-text: #f5f5f7;
	--drumix-color-muted: #b3b3ba;
	--drumix-color-success: #68d99d;
	--drumix-color-success-soft: rgba(104, 217, 157, .14);
	--drumix-color-warning: #f2c46d;
	--drumix-color-warning-soft: rgba(242, 196, 109, .14);
	--drumix-color-danger: #ff8179;
	--drumix-color-danger-soft: rgba(255, 129, 121, .14);
	--drumix-color-warm: #ff9a70;
	--drumix-color-warm-soft: rgba(255, 154, 112, .14);
	--drumix-color-overlay: rgba(0, 0, 0, .72);
	--drumix-shadow-card: none;
	--drumix-shadow-raised: 0 22px 64px rgba(0, 0, 0, .42);
	--drumix-shadow-primary: 0 8px 24px rgba(0, 0, 0, .28);
}

/* Совместимость существующих экранов: визуальные роли приходят из одного источника. */
html.drumix-design {
	--accent: var(--drumix-color-primary);
	--accent-strong: var(--drumix-color-primary-hover);
	--ink: var(--drumix-color-text);
	--sub: var(--drumix-color-muted);
	--line: var(--drumix-color-border);
	--bg: var(--drumix-color-background);
	--panel: var(--drumix-color-surface);
	--soft: var(--drumix-color-surface-soft);
	--soft-blue: var(--drumix-color-primary-soft);
	--success: var(--drumix-color-success);
	--warning: var(--drumix-color-warning);
	--danger: var(--drumix-color-danger);
	--warm: var(--drumix-color-warm);
	--heart: var(--drumix-color-danger);
	--shadow: var(--drumix-shadow-card);

	--on-bg: var(--drumix-color-background);
	--on-panel: color-mix(in srgb, var(--drumix-color-surface) 92%, transparent);
	--on-ink: var(--drumix-color-text);
	--on-sub: var(--drumix-color-muted);
	--on-line: var(--drumix-color-border);
	--on-accent: var(--drumix-color-primary);
	--on-accent-2: var(--drumix-color-primary-hover);
	--on-shadow: var(--drumix-shadow-raised);

	--rep-bg: var(--drumix-color-background);
	--rep-panel: var(--drumix-color-surface);
	--rep-ink: var(--drumix-color-text);
	--rep-sub: var(--drumix-color-muted);
	--rep-line: var(--drumix-color-border);
	--rep-blue: var(--drumix-color-primary);
	--rep-blue-soft: var(--drumix-color-primary-soft);
	--rep-shadow: var(--drumix-shadow-card);
	--rep-radius: var(--drumix-radius-card);

	--drumix-nav-accent: var(--drumix-color-primary);
	--drumix-nav-ink: var(--drumix-color-muted);
	--drumix-nav-line: var(--drumix-color-border);
	--drumix-nav-panel: color-mix(in srgb, var(--drumix-color-surface) 96%, transparent);
	--drumix-nav-active: var(--drumix-color-primary-soft);
	color-scheme: light;
}

html.drumix-design.pb-public-dark { color-scheme: dark; }

html.drumix-design,
html.drumix-design body {
	background-color: var(--drumix-color-background);
	color: var(--drumix-color-text);
	font-family: var(--drumix-font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Единый focus-visible для ссылок, кнопок, полей, вкладок и summary. */
html.drumix-design :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.pb-song-mode :where(.drumix-nav-item, .drumix-song-back):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--drumix-color-focus) 52%, transparent) !important;
	outline-offset: 3px !important;
}

/* Кнопки: Primary, Secondary, Ghost и Icon. */
html.drumix-design :where(
	.home-button,
	.onboarding-skip, .onboarding-back, .onboarding-next,
	.cat-request-btn, .cat-find-btn, .cat-view-btn, .cat-letter-btn,
	.cat-auth-submit, .cat-songreq-submit, .cat-suggest-submit,
	.btn, .auth-submit, .pbPublicThemeToggle,
	.today-button,
	.rep-add, .rep-primary, .rep-secondary, .rep-card-action,
	.text-link, .soft-button, .save-button, .kit-edit, .primary
) {
	min-height: var(--drumix-control-height);
	border-radius: var(--drumix-radius-control);
	font-family: var(--drumix-font-sans);
	font-weight: var(--drumix-weight-strong);
	transition:
		background-color var(--drumix-motion-fast) var(--drumix-motion-ease),
		border-color var(--drumix-motion-fast) var(--drumix-motion-ease),
		box-shadow var(--drumix-motion-fast) var(--drumix-motion-ease),
		transform var(--drumix-motion-fast) var(--drumix-motion-ease),
		opacity var(--drumix-motion-fast) var(--drumix-motion-ease);
}

html.drumix-design :where(
	.home-button.primary, .home-top-cta,
	.onboarding-next,
	.cat-request-btn:not(.secondary), .cat-find-btn, .cat-view-btn,
	.cat-auth-submit, .cat-songreq-submit, .cat-suggest-submit,
	.btn.primary, .auth-submit,
	.today-button-primary,
	.rep-add, .rep-primary, .rep-card-action,
	.save-button, .primary
) {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
	box-shadow: var(--drumix-shadow-primary) !important;
}

html.drumix-design :where(
	.home-button.primary, .home-top-cta,
	.onboarding-next,
	.cat-request-btn:not(.secondary), .cat-find-btn, .cat-view-btn,
	.cat-auth-submit, .cat-songreq-submit, .cat-suggest-submit,
	.btn.primary, .auth-submit,
	.today-button-primary,
	.rep-add, .rep-primary, .rep-card-action,
	.save-button, .primary
):hover {
	background: var(--drumix-color-primary-hover);
	border-color: var(--drumix-color-primary-hover);
	transform: translateY(-1px);
}

html.drumix-design :where(
	.home-button.secondary, .home-login,
	.onboarding-skip, .onboarding-back,
	.cat-request-btn.secondary, .cat-back,
	.btn:not(.primary), .pbPublicThemeToggle,
	.today-button-secondary,
	.rep-secondary,
	.action
) {
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface);
	color: var(--drumix-color-text);
	box-shadow: none;
}

html.drumix-design :where(
	.home-button.secondary, .home-login,
	.onboarding-skip, .onboarding-back,
	.cat-request-btn.secondary, .cat-back,
	.btn:not(.primary),
	.today-button-secondary,
	.rep-secondary,
	.action
):hover { background: var(--drumix-color-surface-soft); }

html.drumix-design :where(
	.today-button-quiet, .today-auth-forgot,
	.cat-auth-forgot, .auth-forgot, .forgot,
	.rep-card-link, .rep-card-expand, .onboarding-link, .text-link
) { color: var(--drumix-color-primary); }

html.drumix-design :where(
	.search-clear, .back-button, .cat-auth-close, .cat-songreq-close,
	.cat-suggest-close, .auth-close, .rep-search button,
	.today-suggestion-card button, .kit-chip button
) {
	width: var(--drumix-icon-control-size);
	height: var(--drumix-icon-control-size);
	min-width: var(--drumix-icon-control-size);
	min-height: var(--drumix-icon-control-size);
	border-radius: var(--drumix-radius-control);
}

html.drumix-design :where(button, [role="button"]):active { transform: translateY(0) scale(.985); }
html.drumix-design :where(button, [role="button"]):disabled,
html.drumix-design :where(button, [role="button"])[aria-disabled="true"] {
	opacity: .52;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Карточки, панели и модальные окна используют одну геометрию. */
html.drumix-design :where(
	.home-proof, .home-steps li, .home-feature-grid article, .home-final,
	.onboarding-visual,
	.cat-request-card, .cat-item, .cat-seo,
	.item, .empty,
	.page > .hero, .category-card, .quick-link, .help-article, .contact, .empty-state,
	.today-loading, .today-secondary-card, .today-suggestion-card, .today-empty, .today-error, .today-auth,
	.rep-loading, .rep-auth, .rep-error, .rep-empty, .rep-no-results, .rep-card,
	.card, .profile-section
) {
	border-color: var(--drumix-color-border);
	border-radius: var(--drumix-radius-card);
	background-color: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

html.drumix-design :where(
	.cat-auth-box, .cat-songreq-box, .cat-suggest-box, .auth-box
) {
	border: 1px solid var(--drumix-color-border);
	border-radius: var(--drumix-radius-card);
	background: var(--drumix-color-surface-raised);
	color: var(--drumix-color-text);
	box-shadow: var(--drumix-shadow-raised);
}

html.drumix-design :where(
	.cat-auth-overlay, .cat-songreq-overlay, .cat-suggest-overlay, .auth
) { background: var(--drumix-color-overlay); }

/* Формы и поиск. */
html.drumix-design :where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
	select, textarea
) {
	min-height: var(--drumix-control-height);
	border-color: var(--drumix-color-border);
	border-radius: var(--drumix-radius-control);
	background: var(--drumix-color-surface-raised);
	color: var(--drumix-color-text);
}

html.drumix-design :where(input, textarea)::placeholder { color: var(--drumix-color-muted); opacity: .82; }
html.drumix-design :where(input, select, textarea):focus-visible { border-color: var(--drumix-color-focus) !important; }

html.drumix-design .pbPublicThemeToggle {
	height: var(--drumix-control-height-compact);
	min-height: var(--drumix-control-height-compact);
	border-color: var(--drumix-color-border);
	border-radius: var(--drumix-radius-control);
	background: var(--drumix-color-surface);
	color: var(--drumix-color-text);
}

/* Общие состояния. */
html.drumix-design :where(.cat-loading, .loading, .today-loading, .rep-loading) { color: var(--drumix-color-muted); }
html.drumix-design :where(.cat-empty, .empty, .empty-state, .today-empty, .rep-empty, .empty-note) { color: var(--drumix-color-muted); }
html.drumix-design :where(.today-error, .rep-error, .msg, .auth-msg, .cat-auth-msg, .cat-songreq-msg, .cat-suggest-msg) { color: var(--drumix-color-danger); }
html.drumix-design :where(.msg.ok, .auth-msg.ok, .cat-songreq-msg.ok, .cat-suggest-msg.ok) { color: var(--drumix-color-success); }

/* Единая оболочка и навигация. */
html.drumix-design :where(.home-top, .cat-top, .top, .today-top, .rep-top) {
	border-color: var(--drumix-color-border);
	background: color-mix(in srgb, var(--drumix-color-surface) 90%, transparent);
}

html.drumix-design .drumix-nav-rail,
html.drumix-design .drumix-nav-mobile {
	border-color: var(--drumix-color-border);
	background: color-mix(in srgb, var(--drumix-color-surface) 96%, transparent);
}

html.drumix-design.pb-public-dark .drumix-nav-logo img { filter: invert(1) hue-rotate(180deg); }

body.pb-song-mode {
	--drumix-nav-accent: var(--drumix-color-primary);
	--drumix-nav-ink: var(--drumix-color-muted);
	--drumix-nav-line: var(--drumix-color-border);
	--drumix-nav-active: var(--drumix-color-primary-soft);
}

@media (max-width: 899px) {
	:root { --drumix-card-padding: 16px; }
	html.drumix-design .pbPublicThemeToggle {
		width: var(--drumix-icon-control-size);
		height: var(--drumix-icon-control-size);
		min-width: var(--drumix-icon-control-size);
		min-height: var(--drumix-icon-control-size);
		border-radius: 50%;
	}
	html.drumix-design :where(.home-button, .onboarding-next, .cat-request-btn, .btn.primary, .today-button-primary, .rep-primary, .rep-add, .save-button, .primary) {
		min-height: var(--drumix-control-height);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.drumix-design { scroll-behavior: auto !important; }
	html.drumix-design *,
	html.drumix-design *::before,
	html.drumix-design *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}