:root {
    --everwhite: #ffffff;
    --everblack: #000000;

    --accentcolor: #064a67;
    --accentcolor-opacity2: rgba(6, 74, 103, 0.2);
    --accentcolor-opacity4: rgba(6, 74, 103, 0.4);
    --accentcolor-opacity6: rgba(6, 74, 103, 0.6);
    --accentcolor-opacity8: rgba(6, 74, 103, 0.8);
    --accentcolor-font: var(--accentcolor);

    --fontcolor-title: #333333;
    --fontcolor-normal: #212529;
    --fontcolor-textmuted: #6c757d;
    --fontcolor-accentcolor-white: #dfe2e5;

    --color-bg-main: #ffffff;
    --color-bg-section: #fefefe;
    --color-bg-section-muted: #f5f7fa;
    --color-bg-section-decent: #e9eff5;

    --cornerradius: 8px;
}

/* 🌙 DARK MODE */
@media (prefers-color-scheme: dark) {
    :root {
        /* Hauptfarben */
        --color-bg-main: #0d1117;
        --color-bg-section: #161b22;
        --color-bg-section-muted: #1e252d;
        --color-bg-section-decent: #2a323c;

        /* Textfarben */
        --fontcolor-title: #f1f5f9;
        --fontcolor-normal: #e5e7eb;
        --fontcolor-textmuted: #9ca3af;

        /* Akzentfarben */
        --accentcolor-font: #3ea8e2;

        /* Spezialfarben */
        --fontcolor-accentcolor-white: #e2e8f0;

        /* "Immerfarben" bleiben gleich */
        --everwhite: #ffffff;
        --everblack: #000000;
    }
}