:root {
    /* Light theme */
    --color-background: #d0e9ff;
    --color-text: #212121;
    --color-accent: #60b6dd;
    --color-nav-background: #007ea7;
    --color-nav-text: #ffffff;
    --color-nav-text-hover: #c0e8ff;
    --color-button-theme-toggle: #dddddd;
    --color-button-theme-toggle-hover: #88e5ff;
    --color-button-cv: #a1d4f3;
    --color-button-cv-hover: #a8dafd;
    --color-card-background: #f0f8fc;
    --color-card-border: #81d0f5;
    --color-card-shadow: #57aadd6e;
    --color-matrix: #297299;
    --color-divider: #1c72a0;
    --color-modal-dialog-cv-background: #d8f3ff;
    --color-border-buttons: #a3d5f7;
    --color-button-copy: #b0eff3;
    --color-button-copy-accent: #b5f3c6;
    --color-btn-personalized-bg: #b4e7fd;
    --color-btn-personalized-bg-hover: #9ee4fc;
    --color-footer-background: #77bed3;
    --color-btn-PlayProject-background: #9dd7b4;
    --color-btn-PlayProject-hover: #a6e3bf;
    --color-btn-DownloadProject-background: #d0caa5;
    --color-btn-DownloadProject-hover: #d9d2ac;
    --color-btn-ViewCode-background: #9ed2fa;
    --color-btn-ViewCode-hover: #8ed0fd;
    --color-alert-personalized-bg: #b2d8ef;
    --color-alert-personalized-border: #a3d5f7;

    /* Typography */
    --font-body: "Roboto", Arial;
    --font-heading: "Roboto", sans-serif;
}

[data-theme="dark"] {
    /* Dark theme */
    --color-background: #1b1c1d;
    --color-text: #ffffff;
    --color-accent: #96bcc7;
    --color-nav-background: #526268;
    --color-nav-text: #ffffff;
    --color-nav-text-hover: #c0e8ff;
    --color-button-theme-toggle: #fffddf;
    --color-button-theme-toggle-hover: #fff174;
    --color-button-cv: #548494;
    --color-button-cv-hover: #71a4b1;
    --color-card-background: #2c2f30;
    --color-card-border: #737b7e;
    --color-card-shadow: #5757576e;
    --color-matrix: #546268;
    --color-divider: #699aaf;
    --color-modal-dialog-cv-background: #464545;
    --color-border-buttons: #878888;
    --color-button-copy: #829490;
    --color-button-copy-accent: #a1d4c3;
    --color-btn-personalized-bg: #5c7f8e;
    --color-btn-personalized-bg-hover: #6993a1;
    --color-footer-background: #2e2e2e;
    --color-btn-PlayProject-background: #5fa196;
    --color-btn-PlayProject-hover: #70b99e;
    --color-btn-DownloadProject-background: #8e946b;
    --color-btn-DownloadProject-hover: #9fa678;
    --color-btn-ViewCode-background: #556fa6;
    --color-btn-ViewCode-hover: #607ebd;
    --color-alert-personalized-bg: #5a666c;
    --color-alert-personalized-border: #7d92a1;
}


body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
}