/* ============================================
   THEME OVERRIDES — Base layer
   Базовые стили, применяющие CSS-переменные из tokens.css.
   Глобальные правила, не зависящие от data-theme.
   Подключается после tokens.css, до theme-dark.css.
   ============================================ */

/* Body */
body {
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header */
header.bg-light {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
}

/* Header Text */
header .text-muted {
    color: var(--text-secondary) !important;
}

header .text-dark {
    color: var(--text-primary) !important;
}

/* Header Search */
header .header-search-form > div {
    background-color: var(--search-bg) !important;
    border-color: var(--search-border) !important;
}

header .header-search-form input {
    color: var(--text-primary) !important;
}

header .header-search-form input::placeholder {
    color: var(--text-muted) !important;
}

/* Header Search Dropdown */
.header-search-dropdown {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.search-dropdown-item:hover {
    background-color: var(--bg-secondary);
}

/* Footer */
footer {
    background-color: var(--bg-footer) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

/* Service Cards */
.service-card-wrapper {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* Important Messages */
.important-message-bar {
    background-color: var(--message-bg);
    border-color: var(--message-border) !important;
}

.important-message-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.important-message-icon {
    background: var(--message-icon-bg);
    color: var(--accent-primary);
}

/* Section Headers */
.section-title p,
.text-muted {
    color: var(--text-secondary) !important;
}

/* Links (exclude buttons to preserve Bootstrap's built-in button text colors) */
a:not(.btn) {
    color: var(--accent-primary);
}

a:not(.btn):hover {
    color: var(--accent-primary-hover);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: #ffffff;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 3vw, 36px);
    height: clamp(28px, 3vw, 36px);
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.theme-toggle:hover {
    background-color: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.theme-toggle i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Icon visibility based on theme */
.theme-toggle .bi-moon-fill {
    display: block;
}

.theme-toggle .bi-sun-fill {
    display: none;
}

[data-theme="dark"] .theme-toggle .bi-moon-fill {
    display: none;
}

[data-theme="dark"] .theme-toggle .bi-sun-fill {
    display: block;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

header,
footer,
.card,
.service-card-wrapper,
.important-message-bar,
.important-message-card,
.btn,
input,
.header-search-dropdown {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* News Card Wrapper — base */
.news-card-wrapper {
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, transparent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease,
                border-color 0.3s ease;
}

/* News Card Image Container — base */
.news-card-image-container {
    background-color: var(--bg-secondary, #f0f0f0);
}

/* ============================================
   Accessibility — Global Focus Styles
   Видимая keyboard-навигация для всего сайта.
   :focus-visible показывает индикатор только при Tab,
   не при клике мышью — так не ломается UX hover.
   ============================================ */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* На тёмных hero-фонах — белый outline для контраста */
.hero-section :focus-visible,
.hero-section-wrapper :focus-visible {
    outline-color: #ffffff;
}

/* Убираем дефолтный :focus outline там, где используется только hover */
:focus:not(:focus-visible) {
    outline: none;
}