:root {
    /* Colors */
    --primary-1: #000305; /* Nearly black, with a hint of the primary color */
    --primary-2: #01131f; /* Very dark shade of primary-5 */
    --primary-3: #012338; /* Darker shade of primary-5 */
    --primary-4: #023252; /* Medium dark shade of primary-5 */
    --primary-5: #02426B; /* Your exact primary color */
    --primary-6: #276891; /* Lighter than primary-5 */
    --primary-7: #81b2d2; /* Lighter still, more diluted with grey */
    --primary-8: #d7ebf8; /* Very light shade of primary-5 */
    --primary-9: #f1f9ff; /* Nearly white, with a hint of primary color */

    --contrast-5: #E07D00;
    --contrast-6: #FFA700;

    /* --darkest-secondary: #241400;
    --darker-secondary: #A85E00;
    --secondary: #E07D00;
    --lighter-secondary: #FFA700;
    --lightest-secondary: #FFC880;

    --light-grey-secondary: #dbd1c3;
    --white-secondary: #e6e0d9; */

    /* Both Modes' Colors */
    --navbar-color: var(--primary-5);
    --navbar-text-color: var(--primary-9);
    
    --logo-text-color: var(--primary-9);
    --logo-qr-color: var(--contrast-6);

    --button-color: var(--primary-5);
    --button-hover-color: var(--primary-6);
    --button-text-color: var(--primary-9);

    --contrast-button-color: var(--contrast-5);
    --contrast-button-hover-color: var(--contrast-6);


    /* Dark Mode Colors */
    --contrast-bg-color: var(--primary-3);
    --background-color: var(--primary-2);

    --text-color: var(--primary-8);
    --header-color: var(--primary-9);

    --shadow-color: rgba(215, 235, 248, 0.2);

    --input-bg-color: var(--primary-3);
    --link-color: var(--contrast-6);

    --border-color: var(--primary-5);

    --list-bg-color: var(--primary-3);
    --nth-element-color: var(--primary-4);

    --clickblocker-color: rgba(128, 128, 128, 0.5);
    
    --warning-color: #aa2525;
    --warning-hover-color: #c63737;
}

/* Light Mode Colors */
.light-mode {
    --contrast-bg-color: var(--primary-9);
    --background-color: var(--primary-8);

    --text-color: var(--primary-2);
    --header-color: var(--primary-3);

    --shadow-color: rgba(0, 3, 5, 0.2);

    --input-bg-color: var(--primary-9);
    --link-color: var(--contrast-5);

    --border-color: var(--primary-7);

    --list-bg-color: var(--primary-9);
    --nth-element-color: var(--primary-8);

    --clickblocker-color: rgba(0, 0, 0, 0.5);

    --warning-color: #ff3333;
    --warning-hover-color: #ff6666;
}