:root {
    /* Whites */
    --snow-drift: #f8fbf8;
    --powdered-sugar: #f4f8ff;
    --frost: #f4f8ff;

    /* Greens */
    --primary-green: #008961; /* Deep Sea Green (Primary) */
    --secondary-green: #009571; /* Lush Green (Secondary) */
    --light-green: #e0f5eb; /* For light backgrounds or subtle accents (Mint) */

    /* Reds */
    --primary-red: #ff6b6b; /* Soft Coral for gentle alerts */
    --secondary-red: #e63946; /* Strong Red for critical errors (balances the green perfectly) */
    --light-red: #ffe5e5; /* Very light background for error states (Pale) */

    /* Yellows */
    --sun-yellow: #ffca3a; /* Bright yet soft yellow */
    --goldenrod: #f4a261; /* Warm golden hue—pairs well with green */
    --pale-yellow: #fff7e6; /* Light background warning tone */

    /* Oranges */
    --tangerine: #ff8c42; /* Vivid tangerine for contrast */
    --soft-orange: #ffd5b4; /* Light orange for backgrounds */
    --amber-orange: #fb8500; /* Bold amber for calls to action */

    /* Blues */
    --light-blue: #e0f2fe; /* Gentle blue background (powder) */
    --secondary-blue: #5bc0eb; /* Soft blue that complements green nicely (sky) */
    --primary-blue: #219ebc; /* Strong blue for info highlights (cerulean) */
    --dark-blue: #023047; /* Dark accent for depth (headers, modals) (midnight) */

    /* Grays */
    --light-gray: #f1f5f9; /* Subtle background */
    --medium-gray: #cbd5e1; /* For borders, disabled states */
    --charcoal-gray: #334155; /* Strong neutral for text */
    --ash-gray: #94a3b8; /* Secondary text */

    /* Additional Accents */
    --lavender: #bfa0e2; /* Soft purple for creative accents */
    --rose-pink: #ff9a8b; /* Warm, energetic highlight */
    --aqua: #00d1b2; /* Tropical vibe that pairs smoothly with your greens */

    --sidebar-width: 250px;
    --sidebar-height: 100vh;

    --sidebar-position: 0px;
    --sidebar-position-closed: var(--sidebar-width);
    
    --navbar-height: 60px;
    --navbar-width: 100%;

    --navbar-position: var(--sidebar-position);
    --navbar-position-open: var(--sidebar-width);

    --content-padding: var(--sidebar-position);
    --content-padding-add: var(--sidebar-width);

    --positive: "✓";
    --negative: "-";
}
/* Questrial */
@font-face {
    font-family: 'Questrial';
    src: url('../library/googlefont/Questrial/Questrial-Regular.woff2') format('woff2'),
         url('../library/googlefont/Questrial/Questrial-Regular.woff') format('woff');    
}
@font-face {
    font-family: 'Inter';
    src: url('../library/googlefont/Inter/Inter-Regular.woff2') format('woff2'),
         url('../library/googlefont/Inter/Inter-Regular.woff') format('woff');
}

.font-questrial {
    font-family: 'Questrial', serif;
}
.font-inter {
    font-family: 'Inter', sans-serif;
}

.test {
    background-color: "#5bc0eb";
    background-color: "#219ebc";
    background-color: "#e0f2fe";
    background-color: "#023047";
}


input[type='radio'] {
    accent-color: var(--primary-green);
}

.tooltip:hover .tooltip-text {
    opacity: 1;
    z-index: 50;
}

@layer utilities {
    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .custom-scrollbar::-webkit-scrollbar {
        width: 10px; /* Scrollbar width */
    }

    /* Scrollbar track (background) */
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent; /* No background */
        border-radius: 10px; /* Optional for a softer look */
    }

    /* Scrollbar thumb (draggable part) */
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--secondary-green); /* Green thumb */
        border-radius: 10px; /* Fully rounded */
        border: 2px solid transparent; /* Creates space effect */
        background-clip: content-box; /* Keeps spacing */
    }

    /* Remove scrollbar buttons (arrows at the top/bottom) */
    .custom-scrollbar::-webkit-scrollbar-button {
        display: none;
    }

    /* Optional: Hover effect on scrollbar thumb */
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--primary-green); /* Slightly darker green on hover */
    }
}

input[type="checkbox"] {
    accent-color: var(--primary-green);
    width: 1rem;
    height: 1rem;
    appearance: none;
    background-color: var(--frost);
    border: 2px solid var(--primary-green);
    border-radius: 3px;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--primary-green);
    border: none;
    position: relative;
}
    
input[type="checkbox"]:checked::after {
    content: var(--positive);
    color: var(--frost);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"].negative:checked::after {
    content: var(--negative);
}
/* End Checkbox */

.test {
    background-color: #e0f2fe;
    background-color: #5bc0eb;
    background-color: #219ebc;
    background-color: #023047;
}