@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   Скин «Альянс Учителей 2026» - CSS поверх базового style.css.

   Источник внешнего вида: прототип WEB/alliance-skin-2026/index.html (собран по
   ТЗ на вёрстку и визуальному референсу владельца). Здесь перенесено то, что
   выразимо чистым CSS по правилам SKINS.md: палитра, типографика, форма шапки,
   кнопок, плиток, hero, панели разделов, подписки и подвала. Блоки, которых нет
   в серверной разметке (статистика, карточки проектов, новости, быстрый доступ,
   преимущества), скином не добавляются - это отдельный этап с правкой шаблонов.

   Разметка, маршруты и функционал не тронуты. Обе темы определены.
   ============================================================================ */

/* --- Переменные скина: светлая тема --- */
:root {
    --au-ink: #071D3A;
    --au-teal-900: #006B68;
    --au-teal: #008C88;
    --au-blue: #087DBA;
    --au-gold: #E9A62B;
    --au-gold-2: #F4C86A;

    --au-surface: #ffffff;      /* карточки, шапка, плитки */
    --au-surface-2: #F6F9FA;    /* дополнительный фон, подвал */
    --au-page: #ffffff;         /* фон страницы */
    --au-tint: #EAF7F6;         /* светлая бирюзовая заливка, ховеры */
    --au-tint-gold: #FDF4E3;
    --au-tint-mint: #E9F3EC;

    --au-text: #071D3A;
    --au-text-muted: #526170;
    --au-border: #E2E8EC;
    --au-border-strong: #CFDCE4;

    --au-hero-grad: linear-gradient(150deg, #ffffff 0%, #F4FAFB 46%, #EAF4F8 100%);
    --au-on-gold: #3A2A05;
    /* Текст на залитых бирюзовых плашках. Светлая тема: белый на #006B68 - 6.4:1. */
    --au-on-teal: #ffffff;
}

/* --- Переменные скина: тёмная тема (обязательна, иначе базовые тёмные токены
       перекроют светлые значения скина) --- */
:root[data-theme="dark"] {
    --au-ink: #E9F0F6;
    /* В тёмной теме бирюзовый работает и фоном кнопки, и цветом текста, поэтому
       он светлее светлой темы: #2E9E99 давал 3.3:1 под белым текстом и 4.25:1
       как текст на тёмной подложке при пороге AA 4.5. */
    --au-teal-900: #3FB6B0;
    --au-teal: #63C7C2;
    --au-blue: #3C9FDB;
    --au-gold: #EFB44B;
    --au-gold-2: #E9A62B;

    --au-surface: #0B2038;
    --au-surface-2: #08192D;
    --au-page: #061527;
    --au-tint: #0C2E36;
    --au-tint-gold: #2A2317;
    --au-tint-mint: #12301F;

    --au-text: #E9F0F6;
    --au-text-muted: #9FB2C2;
    --au-border: #17324F;
    --au-border-strong: #234465;

    --au-hero-grad: linear-gradient(150deg, #08192D 0%, #082131 52%, #062334 100%);
    --au-on-gold: #241A05;
    /* Тёмный текст на светлом бирюзовом: 6.8:1. */
    --au-on-teal: #062334;
}

/* --- Проброс в базовые токены. Список селекторов имеет ту же специфичность,
       что и базовый :root[data-theme="dark"], и выигрывает по порядку загрузки:
       skin.css подключается после style.css. --- */
:root,
:root[data-theme="dark"] {
    --color-forest-ink: var(--au-text);
    --color-cream-paper: var(--au-surface);
    --color-pencil-gray: var(--au-border);
    --color-whisper-gray: var(--au-tint);
    --color-muted-text: var(--au-text-muted);
    --color-terracotta: var(--au-teal-900);

    --color-highlighter-yellow: var(--au-gold-2);
    --color-sticky-note-teal: var(--au-tint);
    --color-sticky-note-mint: var(--au-tint-mint);
    --color-sticky-note-blush: var(--au-tint-gold);

    --color-on-accent: var(--au-on-teal);

    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;

    --shadow-subtle: rgba(7, 29, 58, 0.05) 0 1px 2px 0;
    --shadow-subtle-2: rgba(7, 29, 58, 0.18) 0 8px 24px -12px, rgba(7, 29, 58, 0.06) 0 2px 6px -2px;
}

/* Текст на пастельных плашках задаётся отдельно для каждой темы: в светлой
   пастель светлая (нужен тёмный текст), в тёмной - тёмная (нужен светлый).
   Правило SKINS.md: --color-on-pastel скин светлым в светлой теме не делает. */
:root {
    --color-on-pastel: #071D3A;
    --color-on-highlighter: #3A2A05;
}
:root[data-theme="dark"] {
    --color-on-pastel: #E9F0F6;
    --color-on-highlighter: #241A05;
}

body { background: var(--au-page); }

/* ---------- Шапка ---------- */
.site-nav {
    border-color: var(--au-border);
    border-radius: var(--radius-xl);
}
.nav-links a {
    font-weight: 600;
    transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--au-teal-900); }

/* «Войти» - залитая тёмно-бирюзовая, «Регистрация» - светло-золотая:
   так расставлены акценты в утверждённом прототипе. Переопределение
   ограничено шапкой, базовые .btn-outline/.btn-primary на страницах
   сохраняют свой вид (см. блок «Кнопки» ниже). */
.nav-auth .btn {
    border-radius: var(--radius-md);
    font-weight: 700;
    padding: 9px 18px;
}
.nav-auth .btn-outline {
    background: var(--au-teal-900);
    color: var(--au-on-teal);
    border: 1px solid var(--au-teal-900);
}
.nav-auth .btn-outline:hover {
    background: var(--au-teal);
    border-color: var(--au-teal);
    color: var(--au-on-teal);
}
.nav-auth .btn-primary {
    background: var(--au-gold-2);
    color: var(--au-on-gold);
    border: 1px solid var(--au-gold-2);
}
.nav-auth .btn-primary:hover {
    background: var(--au-gold);
    border-color: var(--au-gold);
    color: var(--au-on-gold);
}

/* ---------- Панель «Разделы»: плитки категорий, как в прототипе ---------- */
.site-subnav {
    border-color: var(--au-border);
    border-radius: var(--radius-2xl);
    padding: 14px;
    gap: 10px;
    box-shadow: rgba(7, 29, 58, 0.16) 0 18px 50px -30px;
}
.site-subnav-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.13em;
}
.site-subnav-links a {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.site-subnav-links a:hover {
    background: var(--au-tint);
    border-color: var(--au-border);
    color: var(--au-teal-900);
    transform: translateY(-1px);
}

/* ---------- Hero ----------
   Базовый hero центрирован и сужен до 720px; в прототипе он занимает всю ширину
   контента и выровнен влево. Отрицательные поля гасят боковой padding
   .container (24px), чтобы блок встал ровно по шапке. 100vw намеренно не
   используется: он считается вместе со скроллбаром и даёт горизонтальную
   прокрутку (грабля, описанная в скине rt-portal). */
.hero {
    max-width: none;
    align-items: flex-start;
    text-align: left;
    margin: 20px -24px 28px;
    padding: 48px 40px 52px;
    border: 1px solid var(--au-border);
    border-radius: var(--radius-2xl);
    /* Правая половина блока в прототипе занята графикой сообщества. Разметки
       под неё нет, поэтому место держит декоративный круг с точечной сеткой
       (см. .hero::after ниже) - символ международного сообщества из прототипа. */
    background: var(--au-hero-grad);
    position: relative;
    overflow: hidden;
}

/* Содержимое hero держится поверх декоративного круга и не заезжает на него. */
.hero > * {
    position: relative;
    z-index: 1;
}
@media (min-width: 1000px) {
    .hero > * { max-width: 64%; }
}
.hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 1.2px 1.2px, rgba(0, 140, 136, 0.34) 1.2px, transparent 1.3px) 0 0 / 19px 19px,
        radial-gradient(circle, rgba(0, 140, 136, 0.10) 0%, transparent 70%);
    border: 1px solid rgba(0, 140, 136, 0.16);
    pointer-events: none;
    z-index: 0;
}
:root[data-theme="dark"] .hero::after {
    background:
        radial-gradient(circle at 1.2px 1.2px, rgba(63, 182, 176, 0.36) 1.2px, transparent 1.3px) 0 0 / 19px 19px,
        radial-gradient(circle, rgba(63, 182, 176, 0.10) 0%, transparent 70%);
    border-color: rgba(63, 182, 176, 0.18);
}
@media (max-width: 860px) {
    .hero::after { display: none; }
}
.hero-heading {
    justify-content: flex-start;
    gap: 18px;
}
.hero-heading h1 {
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.03;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.hero p,
.hero-lead {
    max-width: 62ch;
    color: var(--au-text-muted);
}

/* Плашка-эйбрау: белая пилюля с бирюзовым текстом и золотой точкой.
   Точка добавлена псевдоэлементом - разметка не меняется. */
.badge {
    background: var(--au-surface);
    border: 1px solid var(--au-border);
    color: var(--au-teal-900);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding: 8px 16px 8px 12px;
    box-shadow: var(--shadow-subtle);
}
.badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--au-gold);
    flex: none;
}

/* Акцент второй строки заголовка: в прототипе это бирюзовая строка, а не
   жёлтый маркер. Маркер .mark в остальном тексте сайта не трогаем - там он
   остаётся заливкой (золотой, см. --color-highlighter-yellow выше). */
.hero-heading .mark {
    background: transparent;
    color: var(--au-teal-900);
    padding: 0;
}

/* ---------- Кнопки ---------- */
.btn {
    border-radius: var(--radius-md);
    font-weight: 700;
}
.btn-primary {
    background: var(--au-teal-900);
    color: var(--au-on-teal);
    border: 1px solid var(--au-teal-900);
}
.btn-primary:hover {
    background: var(--au-teal);
    border-color: var(--au-teal);
    color: var(--au-on-teal);
}
.btn-outline {
    background: var(--au-surface);
    color: var(--au-text);
    border: 1px solid var(--au-border);
}
.btn-outline:hover {
    border-color: var(--au-teal);
    color: var(--au-teal-900);
    background: var(--au-surface);
}

/* ---------- Плитки разделов ---------- */
.section-grid { gap: 18px; }
.section-card {
    border-radius: var(--radius-xl);
    padding: 24px 22px;
    gap: 14px;
}
.section-card:hover {
    border-color: var(--au-teal);
    transform: translateY(-4px);
}
.section-card .icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: var(--au-tint);
    color: var(--au-teal-900);
}
.section-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.section-card-desc { font-size: 14px; }

/* ---------- «Как это устроено» ---------- */
.how-it-works h2 { font-weight: 600; }
.steps-index {
    background: var(--au-tint);
    color: var(--au-teal-900);
    font-family: var(--font-body);
    font-weight: 800;
    border: 1px solid var(--au-border);
}

/* ---------- Подписка: бирюзово-синяя полоса ----------
   Полоса залита насыщенным градиентом в обеих темах, поэтому текст внутри
   задан белым явно, а не через токены поверхностей. */
.newsletter-cta {
    background: linear-gradient(100deg, #006B68 0%, #01737F 45%, #087DBA 100%);
    border-color: transparent;
    color: #ffffff;
    padding: 30px 34px;
}
.newsletter-cta-text h2 {
    color: #ffffff;
    font-weight: 600;
}
.newsletter-cta-text p { color: rgba(255, 255, 255, 0.93); }
.newsletter-cta .checkbox-row,
.newsletter-cta .checkbox-row a { color: #ffffff; }
.newsletter-cta-field input[type="email"] {
    border-color: rgba(255, 255, 255, 0.3);
    background: #ffffff;
    color: #071D3A;
}
.newsletter-cta .btn-primary {
    background: #ffffff;
    color: #006B68;
    border-color: #ffffff;
}
.newsletter-cta .btn-primary:hover {
    background: var(--au-gold-2);
    border-color: var(--au-gold-2);
    color: var(--au-on-gold);
}

/* ---------- Подвал ---------- */
.site-footer {
    background: var(--au-surface-2);
    border-top: 1px solid var(--au-border);
}
.site-footer h2,
.site-footer h3,
.site-footer .footer-col-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--au-text-muted);
}
.site-footer a { transition: color 0.18s ease; }
.site-footer a:hover { color: var(--au-teal-900); }

/* ---------- Общая типографика ---------- */
h1, h2, h3 { letter-spacing: -0.01em; }
h2 { font-weight: 600; }
.card { border-radius: var(--radius-xl); }