/* :root {
    --color-1: rgb(0, 109, 119);
    --color-2: rgb(131, 197, 190);
    --color-3: rgb(237, 246, 249);
    --color-4: rgb(255, 221, 210);
    --color-5: rgb(226, 149, 120);
} */

/* Global theme */


/* Light theme */
html {
    --brand-light: var(--blue-5);

    --click-effect-light: var(--stone-8) --text-1-light: var(--gray-8);
    --text-2-light: var(--gray-7);

    --surface-1-light: var(--gray-0);
    --surface-2-light: var(--gray-1);
    --surface-3-light: var(--gray-2);
    --surface-4-light: var(--gray-3);
}

/* Dark theme */
html {
    --brand-dark: var(--orange-3);

    --click-effect-dark: var(--stone-3) --text-1-dark: var(--gray-3);
    --text-2-dark: var(--gray-5);

    --surface-1-dark: var(--gray-12);
    --surface-2-dark: var(--gray-11);
    --surface-3-dark: var(--gray-10);
    --surface-4-dark: var(--gray-9);
}

/* Light aliased */
:root {
    --brand: var(--brand-light);

    --text-1: var(--text-1-light);
    --text-2: var(--text-2-light);

    --surface-1: var(--surface-1-light);
    --surface-2: var(--surface-2-light);
    --surface-3: var(--surface-3-light);
    --surface-4: var(--surface-4-light);
}

/* Dark aliased */
@media (prefers-color-scheme: dark) {
    :root {
        --brand: var(--brand-dark);

        --click-effect: var(var(--click-effect-dark))

        --text-1: var(--text-1-dark);
        --text-2: var(--text-2-dark);

        --surface-1: var(--surface-1-dark);
        --surface-2: var(--surface-2-dark);
        --surface-3: var(--surface-3-dark);
        --surface-4: var(--surface-4-dark);
    }
}


div.clickEffect {
    position: fixed;
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--click-effect);
    border-radius: 50%;
    animation: clickEffect 0.4s ease-out;
    z-index: var(--layer-5);
}

@keyframes clickEffect {
    0% {
        opacity: 1;
        width: 0.5rem;
        height: 0.5rem;
        margin: -0.25em;
        border-width: 0.5rem;
    }

    100% {
        opacity: 0.2;
        width: 5rem;
        height: 5rem;
        margin: -2.5em;
        border-width: 0.03rem;
    }
}