@charset "utf-8";

/* 1. DEFINE COLOR VARIABLES */
:root {
    /* Light Mode (Defaults) */
    --bg-body: #ffffff;
    --text-body: #1a1a1a;

    --table-nav-bg: #FF99cc;
    --td-nav-bg: #555566;
    
    --nav-link-text: #BB99cc;
    --nav-link-bg: #555566;
    
    --nav-hover-text: #cc0000;
    --nav-hover-bg: #ffff99;
}

/* 2. DARK MODE OVERRIDES */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #121212;
        --text-body: #f0f0f0;

        /* Darker, desaturated tones for dark mode */
        --table-nav-bg: #4a2a3a; 
        --td-nav-bg: #22222b;
        
        --nav-link-text: #dcbfe9; /* Lightened purple for contrast */
        --nav-link-bg: #22222b;
        
        --nav-hover-text: #ff4d4d;
        --nav-hover-bg: #444400;
    }
}

/* 3. CORE STYLES */
BODY, P, BLOCKQUOTE, UL, OL, DL, DD, LI, DIR, MENU {    
    font-family: Arial, Geneva, Helvetica, sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}

table.topNav {
    text-align: center; 
    text-decoration: none; 
    background-color: var(--table-nav-bg);
}    

td.topNav {
    text-align: center; 
    text-decoration: none; 
    background-color: var(--td-nav-bg);
}    

a.topNav:link, a.topNav:visited, a.topNav:active {
    font-family: Arial, Geneva, Helvetica, sans-serif;  
    color: var(--nav-link-text); 
    background-color: var(--nav-link-bg); 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold;      
}

a.topNav:hover { 
    color: var(--nav-hover-text); 
    background-color: var(--nav-hover-bg); 
    text-align: center;
    text-decoration: none; 
    font-weight: bold; 
}