/* Vibrant palette overlay — подключается ПОСЛЕ app.css (и app-compact.css).
   Чтобы откатить только палитру, не теряя компактность —
   удалите/закомментируйте <link> на этот файл в base.html.
   Минимализм сохранён: акценты ставим точечно, не «раскрашиваем всё подряд». */

:root {
    /* Сатурированные примитивы — заменяют пастельные исходники app.css */
    --sw-color-cyan-400: #36c6dc;
    --sw-color-gold-400: #e2a347;
    --sw-color-rose-300: #ff6e8e;
    --sw-color-lilac-300: #8b6cf6;

    /* Новые акценты — coral, mint, violet, sun */
    --sw-color-coral: #ff5d7a;
    --sw-color-mint: #21c39a;
    --sw-color-violet: #6d4af5;
    --sw-color-sun: #ffb547;

    /* Semantic re-mapping */
    --sw-rose: var(--sw-color-coral);
    --sw-lilac: var(--sw-color-violet);
    --sw-gold: var(--sw-color-gold-400);
    --sw-accent-soft: var(--sw-color-cyan-400);

    /* Верхняя «радуга» карточек — заметнее, но всё ещё 1-2px полосой */
    --sw-card-top: linear-gradient(
        90deg,
        rgba(255, 93, 122, 0.55) 0%,
        rgba(226, 163, 71, 0.55) 28%,
        rgba(33, 195, 154, 0.55) 56%,
        rgba(49, 94, 251, 0.55) 80%,
        rgba(109, 74, 245, 0.55) 100%
    );
}

/* Фоновые «пятна» — чуть насыщеннее, но всё ещё неброские */
html {
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 181, 71, 0.22), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(54, 198, 220, 0.22), transparent 26%),
        radial-gradient(circle at 18% 82%, rgba(255, 110, 142, 0.18), transparent 28%),
        radial-gradient(circle at 76% 80%, rgba(109, 74, 245, 0.18), transparent 28%),
        linear-gradient(180deg, #fffdfa 0%, #f6f1e8 100%);
}

/* Полоса-«радуга» на карточках: вписана внутрь и со скруглёнными концами,
   чтобы повторять форму карты, а не «вылезать» за её скругления. */
.glass-card::before,
.profile-hero::before,
.post-card::before,
.feature-card::before {
    inset: 0 18px auto;
    height: 2px;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .glass-card::before,
    .profile-hero::before,
    .post-card::before,
    .feature-card::before {
        inset: 0 12px auto;
    }
}

/* Бренд-марка — duotone violet→coral */
.brand-mark {
    background: linear-gradient(135deg, var(--sw-color-violet), var(--sw-color-coral));
    box-shadow:
        0 0 0 5px rgba(109, 74, 245, 0.1),
        0 8px 18px rgba(255, 93, 122, 0.22);
}

/* Primary button — фирменный градиент blue → violet → coral */
.primary-button {
    background: linear-gradient(
        135deg,
        var(--sw-color-blue-700) 0%,
        var(--sw-color-violet) 50%,
        var(--sw-color-coral) 100%
    );
    border-color: rgba(109, 74, 245, 0.28);
    box-shadow:
        0 10px 22px rgba(109, 74, 245, 0.22),
        0 6px 14px rgba(255, 93, 122, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Активная вкладка навигации — подсвет фиолетово-коралловой точкой */
.main-nav a.is-active::after,
.nav-dropdown.is-active summary::after {
    background: linear-gradient(135deg, var(--sw-color-violet), var(--sw-color-coral));
    box-shadow: 0 0 0 3px rgba(109, 74, 245, 0.1);
}

/* Eyebrow (мелкая надпись над заголовком секции) — фирменный градиент-текст */
.eyebrow {
    color: transparent;
    background: linear-gradient(90deg, var(--sw-color-violet), var(--sw-color-coral));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Бейдж непрочитанного — теплее и заметнее */
.nav-badge {
    background: linear-gradient(135deg, rgba(255, 93, 122, 0.16), rgba(109, 74, 245, 0.16));
    color: var(--sw-color-coral);
}

.profile-summary-badge {
    background: rgba(33, 195, 154, 0.16);
    color: #0e8c63;
}

/* Pill/chip — нейтральные остаются нейтральными.
   Активный pill получает мягкий цветной фон. */
.pill.is-active,
.pill[aria-current="page"],
.pill[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(109, 74, 245, 0.12), rgba(255, 93, 122, 0.1));
    border-color: rgba(109, 74, 245, 0.22);
    color: var(--sw-color-violet);
}

/* Hover на карточках — мягкий цветной край */
.profile-card:hover,
.album-card:hover,
.post-card:hover,
.conversation-link:hover,
.info-page-related-card:hover {
    border-color: rgba(109, 74, 245, 0.28);
}

/* Сообщения коммьюнити-чата — имя автора в фирменном градиенте */
.chat-message-head strong {
    color: transparent;
    background: linear-gradient(90deg, var(--sw-color-violet), var(--sw-color-coral));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Underline-акцент под заголовком секции — едва заметный, но цветной */
.section-header h1,
.profile-hero-copy h1 {
    background: linear-gradient(90deg, var(--sw-text) 60%, var(--sw-color-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Карточка-«фича» / info-page-item — цветная буква-цифра */
.info-page-item span {
    color: var(--sw-color-violet);
}

/* Hover главной навигации — фиолетовая обводка вместо синей */
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active,
.main-nav summary:hover,
.main-nav summary:focus-visible,
.nav-dropdown.is-active summary {
    border-color: rgba(109, 74, 245, 0.2);
}

/* Анонс-бар — теплее, но всё ещё ночной */
.announcement-bar {
    background: linear-gradient(90deg, #2a0b22 0%, #1a0a2a 50%, #2a0b22 100%);
}