/* --- Основной файл стилей для "Society Of Future" --- */

/* 1. Шрифты */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-LightOblique.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-RegularOblique.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-UltraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/assets/fonts/GTWalsheimPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* 2. Цветовые переменные для тем */
:root {
    /* Темная тема (по умолчанию) */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-header: rgba(18, 18, 18, 0.85);
    --bg-interactive: #333;
    --border-color: #333;
    --text-primary: #E0E0E0;
    --text-secondary: #BDBDBD;
    --text-logo: #FFFFFF;
    --accent-primary: #BB86FC;
    --accent-primary-text: #121212;
    --accent-hover: #FFFFFF;
}

body.light-theme {
    /* Светлая тема */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.85);
    --bg-interactive: #e0e0e0;
    --border-color: #d1d1d1;
    --text-primary: #212121;
    --text-secondary: #555555;
    --text-logo: #000000;
    --accent-primary: #8224E3;
    --accent-primary-text: #FFFFFF;
    --accent-hover: #000000;
}

/* 3. Глобальные стили */
body {
    font-family: 'GT Walsheim Pro', sans-serif;
    margin: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    scroll-behavior: smooth;
    transition: background-color 0.3s, color 0.3s;
    line-height: 1.6;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 { font-size: 40;
    letter-spacing: -0.02em;
}

  h1 {
    font-size: 12rem; /*  Два раза больше базового размера */
  }

/* 4. Стили для шапки сайта (header) */
header {
    position: sticky; top: 0; z-index: 1000; display: flex;
    justify-content: space-between; align-items: center;
    padding: 15px 5%; background-color: var(--bg-header);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px; /* Расстояние между картинкой и текстом */
}

.logo-image {
    height: 45px; /* Основная высота логотипа */
    width: auto;
}

nav {
    display: flex;
    align-items: center;
}

nav a {
    color: var(--text-primary); text-decoration: none;
    margin-left: 20px; font-weight: 500; transition: color 0.3s;
}

nav a:hover {
    color: var(--accent-primary);
}

.main-button {
    background-color: var(--accent-primary); color: var(--accent-primary-text);
    font-weight: 700; padding: 10px 20px; border-radius: 5px;
    text-decoration: none; transition: background-color 0.3s, color 0.3s;
}

.main-button:hover {
    background-color: var(--accent-hover);
    color: var(--bg-secondary);
}

/* 5. Стили для переключателя темы */
#theme-switcher {
    background: none; border: none; cursor: pointer;
    color: var(--text-primary); padding: 5px; margin-left: 15px;
}
#theme-switcher svg {
    width: 24px; height: 24px;
}

/* 6. Стили для переключателя языков в шапке */
#language-switcher-header {
    position: relative;
    margin-left: 20px;
}

#language-switcher-button {
    background: none; border: none; color: var(--text-primary);
    cursor: pointer; display: flex; align-items: center;
    font-weight: 500; padding: 5px;
}

#language-switcher-button:hover {
    color: var(--accent-primary);
}

#language-switcher-button img {
    width: 20px; height: 20px; border-radius: 50%;
}

#language-options {
    display: none; position: absolute; top: 120%; right: 0;
    background-color: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 5px; z-index: 1001; width: max-content; min-width: 180px;
}

.language-option {
    display: flex; align-items: center; padding: 8px 12px;
    cursor: pointer; border-radius: 5px; transition: background-color 0.2s;
    color: var(--text-primary); font-size: 14px;
}

.language-option:hover {
    background-color: var(--bg-interactive);
}

.language-option img {
    width: 20px; height: 20px; margin-right: 10px;
}

/* 7. Стили для скроллбаров */
.overflow-y-auto::-webkit-scrollbar { width: 8px; }
.overflow-y-auto::-webkit-scrollbar-track { background: #374151; }
.overflow-y-auto::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }