/* idol-theme.css */

/* --- Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* --- Idol Theme Color & Font Overrides --- */
:root {
    /* --- Softer Color Palette --- */
    --bg-color: #FFF7FA; /* Very pale pink, almost off-white */
    --primary-color: #FFC0CB; /* Classic Pink - for primary interactive elements, borders */
    --secondary-color: #FBAED2; /* Lavender Pink - for accents, highlights, other borders */
    --secondary-color-rgb: 251, 174, 210; /* RGB for var(--secondary-color), used in dropdowns */
    --glow-color: rgba(251, 174, 210, 0.5); /* Softer glow, based on secondary color */
    
    --text-color: #786871; /* Muted Rose Brown - for general text readability */
    --text-glow: #FFDAE9; /* Light Pink - for subtle highlights on headings/special text */

    /* --- Cyberpunk Button Color Overrides (for .cybr-btn) --- */
    --btn-bg-color: #FFEBF2;        /* Light soft pink background for buttons */
    --btn-text-color: #786871;      /* Button text, same as main text */
    --btn-neon-color: rgba(251, 174, 210, 0.9);  /* Border color for buttons (from secondary) */
    --btn-neon-shadow: rgba(251, 174, 210, 0.6); /* Glow color for buttons (from secondary) */
}

body {
    font-family: 'Nunito Sans', sans-serif; /* Softer, clean font */
    /* Optional: If you want to ensure the background color applies immediately */
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* --- Override font for elements that specifically used Orbitron --- */
.neon-text,
.cybr-btn,
#fan-profile-modal .button-group button, /* Ensure profile modal buttons also get the new font */
#fan-profile-modal .button-group a,
#fan-profile-modal .profile-signout-button {
    font-family: 'Nunito Sans', sans-serif;
}

/* --- Adjust Neon Text Effect for Softer Feel (Optional) --- */
/*
.neon-text {
    text-shadow:
        0 0 3px var(--secondary-color),
        0 0 6px var(--secondary-color),
        0 0 12px var(--glow-color),
        0 0 24px var(--glow-color);
    animation: soft-flicker 3s infinite alternate;
}

@keyframes soft-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 3px var(--secondary-color),
            0 0 6px var(--secondary-color),
            0 0 12px var(--glow-color),
            0 0 24px var(--glow-color);
        opacity: 0.95;
    }
    20%, 24%, 55% {
        text-shadow: 0 0 2px var(--secondary-color);
        opacity: 0.85;
    }
}
*/

/* --- Override for Muted Button State --- */
.cybr-btn[data-variant="neutral"] {
    --btn-bg-color: #FDEEF4;        /* Very light, desaturated pink */
    --btn-text-color: #A19197;      /* Lighter text */
    --btn-neon-color: rgba(251, 174, 210, 0.4);  /* Dimmer pink border */
    --btn-neon-shadow: rgba(251, 174, 210, 0.2); /* Dimmer pink glow */
}

/* --- Ensure icon colors in header also update if they use variables --- */
/*
.header-icon-button {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 4px var(--primary-color), 0 0 8px var(--primary-color);
}
.header-icon-button .button-icon .header-outline {
    stroke: var(--secondary-color);
}
.header-icon-button .button-ic#FFC2C6on .header-filled {
    fill: var(--secondary-color);
}
.header-icon-button.is-loggedin {
  background-color: rgba(251, 174, 210, 0.2); // Using a transparent version of one of the pinks
  filter: drop-shadow(0 0 5px var(--secondary-color));
}
*/

/* You might need to add more specific overrides if some elements
   have their colors hardcoded or use different CSS variables not in :root.
   The provided style.css primarily uses the :root variables for colors.
*/

.dj-box
{
background: rgba(211, 138, 171, 0.95);
}

.dj-name, .dj-name2, .dj-genre
{
color:white;
}