@layer base, layout, components, plugins, pages;

@layer base {
    :root {
        --theme-color-main: #45a273;
        --theme-color-main-dark: #37895e;
        --theme-color-main-soft: #a2dbbe;
        --theme-color-main-darker: #37825c;
        --theme-color-dark: #303331;
        --theme-color-dark-prev: #393836;
        --theme-color-dark-darker: #171c18;
        --theme-color-white-delicate: rgba(255, 255, 255, 0.3);
        --theme-color-white-soft: rgba(255, 255, 255, 0.5);
        --theme-color-white-medium: rgba(255, 255, 255, 0.75);
        --theme-color-white-solid: #f7f7f7;

        --font-body: Mukta, sans-serif;
        --font-heading: Barlow, sans-serif;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 1rem;
        --space-4: 1.5rem;
        --space-5: 3rem;
    }
}