:root {
    /* COLOR */
    --color-white: #F5F5F5;
    --color-black: #141414;
    --color-bg-white: #EDEDED;
    --color-bg-black: #1A1A1A;
    --color-switch-bg-white: #D7D7D7;
    --color-switch-bg-black: #2D2D2D;

    /* FONT SIZE */

    /* SIZE */

    /* PADDING */
    --padding-body: clamp(1rem, 2vw, 4rem);

    /* MARGIN */

    /* RADIUS */
    --radius-img: 0.5rem;

    /* GAP */
    --gap-img: clamp(0.5rem, 2vw, 2rem);
}





/* Light theme */
:root[data-theme="light"] {
    color-scheme: light;

    --color-bg: var(--color-bg-white);
    --color-primary: var(--color-black);
    --color-secondary: var(--color-white);
    --color-switch-bg: var(--color-switch-bg-white);
}

/* Dark theme */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: var(--color-bg-black);
    --color-primary: var(--color-white);
    --color-secondary: var(--color-black);
    --color-switch-bg: var(--color-switch-bg-black);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        --color-bg: var(--color-bg-white);
        --color-primary: var(--color-black);
        --color-secondary: var(--color-white);
        --color-switch-bg: var(--color-switch-bg-white);
    }
}