:root {
    --color-black: #1B1B1B;
    --color-white: #FFFEF5;
    --color-section-2-light: #F1ECFF;
    --color-section-2-dark: #3D384D;
    --color-section-3-light: #E3FFFE;
    --color-section-3-dark: #263938;
    --color-section-4-light: #DFDEFF;
    --color-section-4-dark: #27263D;
    --color-section-5-light: #FFF1F1;
    --color-section-5-dark: #332627;
    --font-family-sans: "DM Sans";
    --font-family-serif: "DM Serif", serif;
    --font-family-mono: "DM Mono", monospace;
    --font-size-base: 1rem;
    --font-size-small: 0.8em;
    --font-size-big: 1.25em;
    --font-size-huge: 3.5em;
    --strike-width: 0.16em;
    --transition-timing: 0.15s;
    --transition-function: ease-in-out;
    --body-color-background: var(--color-background);
    --logo-mark-font-weight: bold;
    --logo-mark-font-size: 1.25em;
    --logo-letter-spacing: 0.05em;
    --catch-font-family: var(--font-family-serif);
    --catch-font-size: var(--font-size-huge);
    --grid-template-mobile: repeat(1, 1fr);
    --grid-template-tablet: repeat(2, 1fr);
    --grid-template-desktop: repeat(3, 1fr);
    --grid-gap: 16px;
    --anchor-font-size: var(--font-size-big);
    --anchor-line-height: 1.35;
    --anchor-total: 5;
    --anchor-padding: 0.2em;
    --section-spacing-top: 1.5em;
    --action-font-size: 0.8em;
    --action-border-radius: 2px;
    --service-body-transition-timing: 0.3s;
}


/**
 * LIGHT MODE
 */

body {
    --color-background: var(--color-white);
    --color-main: var(--color-black);
}

body[data-active="2"] {
    --body-color-background: var(--color-section-2-light);
}

body[data-active="3"] {
    --body-color-background: var(--color-section-3-light);
}

body[data-active="4"] {
    --body-color-background: var(--color-section-4-light);
}

body[data-active="5"] {
    --body-color-background: var(--color-section-5-light);
}

/**
 * DARK MODE
 */

[data-theme="dark"] {
    --color-background: var(--color-black);
    --color-main: var(--color-white);
    --body-color-background: var(--color-background)
}

[data-theme="dark"][data-active="2"] {
    --body-color-background: var(--color-section-2-dark);
}

[data-theme="dark"][data-active="3"] {
    --body-color-background: var(--color-section-3-dark);
}

[data-theme="dark"][data-active="4"] {
    --body-color-background: var(--color-section-4-dark);
}

[data-theme="dark"][data-active="5"] {
    --body-color-background: var(--color-section-5-dark);
}


body {
    --logo-color: var(--color-main);
}