/* Base CSS custom properties — fallback dark values for non-Telegram environments.
   Actual values are overridden by Telegram WebApp SDK at runtime (sets --tg-theme-*
   directly on :root) and by theme-dark.css / theme-light.css via data-theme. */
:root {
    --tg-theme-bg-color: #1a1a2e;
    --tg-theme-text-color: #e0e0e0;
    --tg-theme-hint-color: #8e8ea0;
    --tg-theme-link-color: #7c83db;
    --tg-theme-button-color: #7c83db;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #16213e;

    /* Moon SVG colors */
    --moon-dark-color: #1a1a2e;
    --moon-lit-color: #f5e6c8;
    --moon-glow-color: rgba(245, 230, 200, 0.15);
}

/* ── SVG Moon component ─────────────────────────────────────────────────── */
.moon-svg {
    display: block;
    filter: drop-shadow(0 0 8px var(--moon-glow-color));
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.moon-svg .moon-dark {
    fill: var(--moon-dark-color);
}

.moon-svg .moon-lit {
    fill: var(--moon-lit-color);
}

/* Entrance animation */
.moon-enter {
    opacity: 0;
    transform: scale(0.85) rotate(-8deg);
}

.moon-enter-active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Exit animation */
.moon-exit {
    opacity: 0;
    transform: scale(0.85) rotate(8deg);
    transition: opacity 0.15s ease, transform 0.15s ease;
}