/* =====================================================
   Root Variables
   =====================================================
   Define color variables for both light and dark themes.
   Makes theme switching easier and more maintainable.
*/
:root {
    --bg-light: #f9fafb;   /* Background color for light mode */
    --text-light: #222;    /* Text color for light mode */
    --bg-dark: #0e1c39;    /* Background color for dark mode */
    --text-dark: #e5e5e5;  /* Text color for dark mode */
}

/* Hover effect for username suggestion tags */
body form .flex-wrap span:hover {
    background-color: #8eb9ff;
}

/* =====================================================
   Theme Toggle (Desktop)
   =====================================================
   Ensure the theme toggle icon is clickable
   regardless of current theme mode.
*/
body a#theme-toggle-desktop {
    cursor: pointer;
}
body.dark-mode a#theme-toggle-desktop {
    cursor: pointer;
}

/* =====================================================
   Base Body Styles (Light Mode)
   =====================================================
   Default colors and typography for the light theme.
*/
body {
    background-color: var(--bg-light);
    color: var(--text-light);
    font-family: system-ui, sans-serif;
    margin: 0;
}

/* =====================================================
   Dark Mode Styles
   =====================================================
   Apply inverse color scheme and adjust form elements.
*/
body.dark-mode {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

/* Dark mode background for form container */
body.dark-mode form {
    background-color: #1f2937;
}

/* Lighten label text in dark mode */
body.dark-mode form label {
    color: var(--text-dark);
}

/* Username suggestion badges in dark mode */
body.dark-mode form .flex-wrap span {
    background-color: #314977;
}

/* Hover effect for suggestion badges in dark mode */
body.dark-mode form .flex-wrap span:hover {
    background-color: #0e1c39;
}

/* Input field background in dark mode (light text area) */
body.dark-mode form input {
    background-color: var(--text-light);
}

/* Submit button color (dark on light background) */
body.dark-mode form button#submit {
    background-color: var(--text-light);
}

/* Submit button hover state for dark mode */
body.dark-mode form button#submit:hover {
    background-color: #374151;
}

/* =====================================================
   Theme Toggle Icon Animations
   =====================================================
   Adds a slight animation to the theme toggle button
   for both light and dark modes on hover.
*/
body.dark-mode form button#theme-toggle-desktop:hover,
body form button#theme-toggle-desktop:hover {
    opacity: 1;
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0)
    scaleX(1.1) scaleY(1.1);
}

/* =====================================================
   Theme Toggle Button Icon
   =====================================================
   Styles the circular button used to toggle themes.
*/
#theme-toggle {
    border: none;
    width: 20px;
    height: 20px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slight hover scaling effect for visual feedback */
#theme-toggle:hover {
    transform: scale(1.1);
}