/* ==================================================================== */
/*          LetsTuneIt - "Clean Slate" Light Theme                    */
/*          (Light Grey, Amber Yellow & Galaxy Purple)                */
/* ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@400;700&display=swap');

/* --- Root Variables for the Light Theme --- */
:root {
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-font-monospace: 'Orbitron', sans-serif;

    /* Core Color Palette */
    --bs-primary:             #ffc107; /* Amber Yellow */
    --bs-primary-rgb:         255, 193, 7;

    --bs-secondary:           #6c757d; /* Standard Grey */
    --bs-secondary-rgb:       108, 117, 125;

    --bs-info:                #8A2BE2; /* Galaxy Purple */
    --bs-info-rgb:            138, 43, 226;

    --bs-success:             #198754;
    --bs-danger:              #dc3545;
    --bs-dark:                #212529;
    --bs-light:               #f8f9fa; /* Light grey for body background */
    --bs-light-rgb:           248, 249, 250;

    /* Body & Text Defaults */
    --bs-body-bg:             var(--bs-light);
    --bs-body-color:          #212529; /* Dark text for readability */
    --bs-border-color:        #dee2e6;
    --bs-tertiary-color:      #000000; /* Black for strong headings */
    --bs-secondary-bg:        #ffffff; /* White for component backgrounds */
    --bs-secondary-color:     rgba(0, 0, 0, 0.6); /* Muted text */
    
    /* Link Styling */
    --bs-link-color:              var(--bs-info);
    --bs-link-hover-color:        #6a1fb2; /* Darker purple on hover */
    --bs-link-color-rgb:          var(--bs-info-rgb);
    
    /* Component Overrides */
    --bs-card-bg:                 var(--bs-secondary-bg); /* White cards */
    --bs-card-border-color:       var(--bs-border-color);
    --bs-card-cap-bg:             rgba(0, 0, 0, 0.03); /* Subtle grey card header */
    --bs-card-color:              var(--bs-body-color);
    --bs-card-cap-color:          var(--bs-tertiary-color);
    
    --bs-form-control-bg:         #fff;
    --bs-form-control-color:      var(--bs-body-color);
    --bs-form-control-border-color: #ced4da;
    --bs-form-label-color:        #495057;

    --bs-list-group-bg:           #fff;
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-action-hover-bg: #f8f9fa;
    --bs-list-group-action-active-bg:  var(--bs-primary);
    --bs-list-group-action-active-color: #000;
}

/* ======================================================== */
/*          GENERAL TYPOGRAPHY & ELEMENT STYLING            */
/* ======================================================== */

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    color: var(--bs-tertiary-color);
}

a {
    color: var(--bs-info);
    text-decoration: none;
    transition: color .2s ease-in-out;
}
a:hover {
    color: var(--bs-link-hover-color);
}
.btn, .card a, .list-group-item, .navbar-brand, .nav-link {
    text-decoration: none !important;
}

/* Navbar specific styling - A light navbar with dark text */
.navbar {
    /* Keeping the navbar dark as it provides a good anchor for the page */
    background-color: var(--bs-dark) !important;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

/* Buttons */
.btn-primary {
    color: #000; /* Black text on yellow buttons for high contrast */
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: bold;
}
.btn-primary:hover {
    background-color: #e6ac00;
    border-color: #e6ac00;
}
.btn-info {
    color: #fff;
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

/* Forms */
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ======================================================== */
/*          THEME SWITCHER VISIBILITY FIX                   */
/* ======================================================== */

/* Hide the theme switcher by default to prevent a "flash" on load */
.theme-switcher {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* When we are ready, this class will be added by JS to fade it in */
.theme-switcher.visible {
    visibility: visible;
    opacity: 1;
}