/**
 * Mychord Premium Design System
 * -----------------------------------------------------------------------------
 * Центральний файл для глобальних змінних, типографіки та переопределень теми.
 * Організовано за методологією "Clean Code".
 */

:root {
	/* Palette: Midnight Blue & Amber Gold */
	--my-primary: #3b82f6;
	--my-primary-light: #60a5fa;
	--my-accent: #f59e0b;
	--my-accent-hover: #fbbf24;
	--my-bg-main: #0f172a;
	--my-bg-dark: #1e293b;
	--my-bg-glass: rgba(30, 41, 59, 0.4);

	/* Text Colors */
	--my-text-main: #e2e8f0;
	--my-text-muted: #94a3b8;
	--my-text-bright: #ffffff;

	/* Functional Tokens */
	--my-bg-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
	--glass-blur: blur(12px);
	--glass-border: rgba(255, 255, 255, 0.08);

	/* Spacing & Borders */
	--my-radius-sm: 8px;
	--my-radius-md: 12px;
	--my-radius-lg: 16px;
	--my-radius-xl: 24px;

	/* Shadow */
	--my-shadow-premium: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.3);

	/* Typography */
	--font-heading: 'Outfit', sans-serif;
	--font-body: 'Inter', sans-serif;
}

/* 1. ГЛОБАЛЬНІ СКИНОВІ НАЛАШТУВАННЯ */
body {
	font-family: var(--font-body) !important;
	background: var(--my-bg-main) !important;
	background-image: var(--my-bg-gradient) !important;
	background-attachment: fixed !important;
	color: var(--my-text-main) !important;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.song-title,
.logo-text {
	font-family: var(--font-heading) !important;
	letter-spacing: -0.01em;
}

/* 2. ПЕРЕВИЗНАЧЕННЯ КОНТЕЙНЕРІВ ТЕМИ (ЗАЧИСТКА БІЛОГО) */
#page,
#primary,
#content,
main,
article,
.site-main,
.site-content,
.container,
.content-area,
.entry-content,
.entry-header,
.entry-footer,
.song-block,
.song-text-container,
.breadcrumbs,
.ad-block,
.chordAreaColor,
.b-words__text-background,
.mychord-controls,
.mychord-mini-controls,
.mychord-button-group,
.mychord-tools-section,
.controls-container,
.modal-content,
.mychord-content {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* 3. КОМПОНЕНТИ ГЛАСМОРФІЗМУ (ПЕРЕВИЗНАЧЕННЯ СТИЛІВ ПЛАГІНІВ) */
.song-block,
.song-text-container,
.mychord-controls,
.mychord-mini-controls,
.mychord-button-group,
.mychord-tools-section,
.controls-container,
.modal-content,
.mychord-content:not(.premium-header),
.widget,
.sidebar,
.widget-area {
	background: var(--my-bg-glass) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--my-radius-lg) !important;
	color: var(--my-text-main) !important;
	padding: 20px !important;
	margin-bottom: 25px !important;
	box-shadow: var(--my-shadow-premium) !important;
}

/* Специфічні блоки з підписами (напр. "АКОРДИ") */
.mychord-button-group,
.mychord-tools-section {
	position: relative;
	margin-top: 20px;
}

/* 4. ТИПОГРАФІКА ВІДЖЕТІВ ТА ЗАГОЛОВКІВ */
.widget-title {
	font-family: var(--font-heading) !important;
	color: #ffffff !important;
	border-bottom: 2px solid var(--my-accent) !important;
	padding-bottom: 10px !important;
	margin-bottom: 15px !important;
	font-size: 18px !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* 5. ВИПРАВЛЕННЯ КОЛЬОРУ ТЕКСТУ В БІЛИХ БЛОКАХ */
.mychord-button,
.controls-container *,
.mychord-tools-section *,
.modal-content * {
	color: var(--my-text-main) !important;
}