/* ============================
   Dark Theme Styles (Default)
   ============================ */

:root {
    /* Backgrounds */
    --bg-body: #0b132b;       /* The deep navy blue main background */
    --bg-card: #1c2541;       /* Slightly lighter navy for cards */
    --bg-search: #1c2541;     /* Darker for search bar, same as card */
    --bg-btn-hover: #ffffff;  /* Hover state for buttons/filters */
    --bg-btn-active: #3f51b5; /* Primary accent blue */
    --bg-btn-transparent: transparent;
    
    /* Borders */
    --border-color: #3a506b;  /* Subtle navy border */
    --border-hover: #5bc0be;
    
    /* Text Colors */
    --text-main: #e2e8f0;     /* Off-white text */
    --text-muted: #9ba4b5;    /* Muted blue-grey text */
    --text-search: #e2e8f0;
    --text-btn: #9ba4b5;
    --text-btn-hover: #0b132b; /* Text goes dark when hovering on bright button */
    --text-btn-active: #ffffff;
    
    /* Logo Colors */
    --logo-bg: #e2e8f0;       /* Light box for dark theme */
    --logo-text: #0b132b;     /* Dark text inside light box */

    /* Scroll To Top Button */
    --scroll-bg: #3a506b;     /* Lighter navy to stand out against background */
    
    /* Shadow */
    --card-shadow-hover: 0 10px 25px rgba(0,0,0,0.3);

    /* Accents & Links */
    --link-color: #5bc0be;
    --link-hover: #6fffe9;
    --link-active: #3f51b5;
    
    /* Alt Elements (like Timeline, Modals, Forms) */
    --bg-alt: #1c2541;
    --border-alt: rgba(212, 212, 255, 0.1);
    --bg-input: rgba(212, 212, 255, 0.035);
    
    /* Footer */
    --bg-footer: #1c2541; /* Match --bg-card (navbar) */
    --border-footer: rgba(212, 212, 255, 0.1);

    /* Mobile Nav */
    --bg-nav-submenu: var(--bg-card); /* Match header background for seamless look */
}