/* Custom styles for Push Push App landing page */
body {
    /* black background with subtle lavender radial gradient */
    background: radial-gradient(circle at center, rgba(245, 170, 255, 0.25), transparent), #000;
    transition: background 0.5s ease, color 0.5s ease;
}

/* Light mode styles */
body.light-mode {
    background: radial-gradient(circle at center, rgba(245, 170, 255, 0.25), transparent), #fff;
    color: #333;
}

body.light-mode .text-white {
    color: #333 !important;
}

body.light-mode .text-gray-400 {
    color: #666 !important;
}

# Darker purple for the second "Push" in light mode
body.light-mode #push-secondary {
    color: #c06cff;
}

#theme-toggle {
    background-color: rgba(255, 255, 255, 0.1);
}

body.light-mode #theme-toggle {
    background-color: rgba(0, 0, 0, 0.05);
    color: #c06cff;
}

/*
 * Keep the widget preview image from growing too wide on large screens.
 * This ensures it remains close in width to the hero heading and subtext
 * for a balanced layout.
 */
#widget-preview {
    /* Keep the widget preview image from growing too wide.
     * A tighter max width ensures it lines up nicely with the
     * surrounding text, even on large screens. */
    max-width: 320px;
}