:root {
    /* --- BRAND COLORS --- */
    --main-color: #4682B4;
    --main-color-hover: #3572A5;
    --secondary-color: #6B8E23;
    --secondary-color-darker: #556B2F;
    --accent: #00CED1;
    
    /* --- BACKGROUNDS & SURFACES --- */
    --bg-main: #F8F9FA;
    --surface: #FFFFFF;
    --border-soft: #D1D9E0;
    
    /* --- TEXT --- */
    --text-main: #2C3E50;
    --text-muted: #62727B;
    
    /* --- INPUTS & FORMS --- */
    --input-bg: #FFFFFF;
    --input-border: #D1D9E0;
    --input-focus-bg: #FFFFFF;
    --input-focus-border: var(--main-color);
    
    /* --- MAPPINGS --- */
    --input-fill: var(--input-bg);
    --form-border: var(--input-border);
    --form-text: var(--text-main);
    --form-bg: var(--surface);
    
    /* --- LINKS --- */
    --link-color: var(--main-color);
    --link-hover: #1a235a;
    
    /* --- PWA --- */
    --pwa-bg: var(--secondary-color);
    --pwa-text: #ffffff;
    
    --scrollbar-width: 0px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0F172A;
        --surface: #1E293B;
        --border-soft: #334155;
        --text-main: #F1F5F9;
        --text-muted: #94A3B8;
       
        --main-color: #60A5FA;
        --main-color-hover: #93C5FD;
        --secondary-color: #8DB600;
        --secondary-color-darker: #A4C639;
        --accent: #22D3EE;
        --input-bg: #1E293B;
        --input-border: #334155;
        --input-focus-bg: #1E293B;
        --link-hover: #93C5FD;
    }
}