/* ============================================================================
   THEME-LIGHT.CSS — СВЕТЛАЯ ТЕМА (публичная часть сайта)
   ----------------------------------------------------------------------------
   Где используется: главная, «О проекте», «Смешные картинки», вход, регистрация.
   Характер темы: тёплый, дружелюбный, «котиный» — без технологий.
   Атмосферу задают: светлый фон с котами (background.jpg) и тёплый янтарный
   акцент. Технологичные элементы (неоновое свечение, синие градиенты) здесь
   не используются намеренно.
   Подключается вместе с base.css на публичных страницах.
   ============================================================================ */

/* ============================================================================
   1. ПЕРЕМЕННЫЕ СВЕТЛОЙ ТЕМЫ
   ============================================================================ */

html[data-theme="light"] {
    /* Фон — светлый, с котами */
    --bg-image: url("/assets/img/background/background.jpg");
    --bg-color: #f6f1e7;

    /* Поверхности */
    --surface: rgba(255, 250, 242, 0.82);
    --surface-strong: rgba(255, 252, 246, 0.96);
    --surface-soft: rgba(255, 250, 242, 0.6);
    --card-bg: rgba(255, 253, 248, 0.78);
    --card-border: rgba(120, 90, 40, 0.16);

    /* Текст — тёплый тёмно-коричневый */
    --text: #2b2419;
    --text-muted: rgba(43, 36, 25, 0.62);

    /* Янтарный «котиный» акцент */
    --accent: #e8890c;
    --accent-strong: #c97807;
    --accent-soft: rgba(232, 137, 12, 0.15);
    --accent-glow: rgba(232, 137, 12, 0.35);
    --on-accent: #ffffff;

    /* Статусы */
    --success: #2e7d4f;
    --success-bg: rgba(46, 125, 79, 0.14);
    --danger: #d64545;
    --danger-bg: rgba(214, 69, 69, 0.13);
    --warning: #c07a00;
    --warning-bg: rgba(192, 122, 0, 0.14);

    /* Формы */
    --input-bg: rgba(255, 255, 255, 0.92);
    --input-border: rgba(120, 90, 40, 0.25);
    --input-text: #2b2419;

    /* Тени — мягкие, тёплые */
    --shadow: 0 4px 16px rgba(90, 60, 20, 0.14);
    --shadow-lg: 0 12px 34px rgba(90, 60, 20, 0.22);
}

/* ============================================================================
   2. ОСОБЕННОСТИ ПУБЛИЧНЫХ СТРАНИЦ
   ============================================================================ */

/* Текст ссылок в контенте — под тёплую гамму */
html[data-theme="light"] .container a,
html[data-theme="light"] .about-container a {
    color: var(--accent-strong);
    font-weight: 700;
}

/* Списки на странице «О проекте» — выравнивание влево */
html[data-theme="light"] .about-container ul {
    margin: 10px 0;
    padding-left: 22px;
    text-align: left;
}

html[data-theme="light"] .about-container ul li {
    margin: 6px 0;
}

/* Тёплое «спасибо» в конце страницы «О проекте» */
html[data-theme="light"] .about-container .thanks {
    font-weight: 700;
    color: var(--accent-strong);
    text-align: center;
    margin-top: 22px;
}

/* ============================================================================
   3. ГАЛЕРЕЯ «СМЕШНЫЕ КАРТИНКИ» (страница /funny)
   ============================================================================ */

/* Сетка галереи — адаптивные колонки */
html[data-theme="light"] .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* Карточка картинки */
html[data-theme="light"] .gallery-grid .item {
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);

    cursor: zoom-in;
    display: grid;
    place-items: center;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Кот «подпрыгивает» при наведении */
html[data-theme="light"] .gallery-grid .item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .gallery-grid .item:active {
    transform: scale(0.97);
}

html[data-theme="light"] .gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

html[data-theme="light"] .gallery-grid .item:hover img {
    transform: scale(1.05);
}

/* ============================================================================
   4. ЛАЙТБОКС (просмотр картинки на весь экран)
   ============================================================================ */

#lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: none;
    justify-content: center;
    align-items: center;
    padding: 18px;

    background: rgba(20, 14, 6, 0.88);
    cursor: zoom-out;

    animation: lightbox-in 0.25s ease both;
}

#lightbox-overlay.open {
    display: flex;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#lightbox-overlay img {
    max-width: 94vw;
    max-height: 92vh;

    border-radius: var(--radius);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);

    animation: lightbox-zoom 0.3s ease both;
}

@keyframes lightbox-zoom {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================================
   5. АДАПТИВНОСТЬ ГАЛЕРЕИ
   ============================================================================ */

@media (max-width: 600px) {
    /* На телефоне — две колонки, картинки крупнее */
    html[data-theme="light"] .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}