:root {
    --base-font-size: 10px;
    --body-font-size: 1.6rem;
    --font-family:
        system-ui, -apple-system, "Segoe UI", "Open Sans", sans-serif;

    --h1-size: clamp(4rem, 2rem + 2.5vw, 6.4rem);
    --h2-size: clamp(3.2rem, 1.8rem + 2vw, 5.2rem);
    --h3-size: clamp(2.6rem, 1.6rem + 1.5vw, 4rem);
    --h4-size: clamp(2.2rem, 1.4rem + 1vw, 3.2rem);
    --h5-size: clamp(1.8rem, 1.2rem + 0.5vw, 2.4rem);
    --h6-size: 1.6rem;
    --line-height-heading: 1.3;

    --radius: 8px;

    /* --primary_rgb: 57, 62, 45;
    --primary_dark_rgb: 17, 24, 39; */
    --primary_rgb: 114, 193, 105;
    --primary_dark_rgb: 64, 179, 79;

    --gray_100: #f8f9fa;
    --gray_200: #e9ecef;
    --gray_300: #dee2e6;
    --gray_400: #ced4da;
    --gray_500: #adb5bd;
    --gray_600: #6c757d;
    --gray_700: #495057;
    --gray_800: #343a40;
    --gray_900: #212529;

    --gray_100_rgb: 248, 249, 250;
    --gray_200_rgb: 233, 236, 239;
    --gray_300_rgb: 222, 226, 230;
    --gray_400_rgb: 206, 212, 218;
    --gray_500_rgb: 173, 181, 189;
    --gray_600_rgb: 108, 117, 125;
    --gray_700_rgb: 73, 80, 87;
    --gray_800_rgb: 52, 58, 64;
    --gray_900_rgb: 33, 37, 41;

    --prime_rgb: 13, 110, 253;
    --prime_dark_rgb: 10, 88, 202;
    --success_rgb: 25, 135, 84;
    --success_dark_rgb: 20, 108, 67;
    --error_rgb: 220, 53, 69;
    --error_dark_rgb: 187, 45, 59;
    --info_rgb: 13, 202, 240;
    --info_dark_rgb: 10, 163, 194;
    --warn_rgb: 255, 193, 7;
    --warn_dark_rgb: 224, 168, 0;
    --light_rgb: 240, 240, 240;
    --light_dark_rgb: 220, 220, 220;
    --dark_rgb: 33, 37, 41;
    --dark_dark_rgb: 52, 58, 64;

    --shadow-1:
        0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --shadow-2:
        0px 2px 4px -1px rgba(0, 0, 0, 0.2),
        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
        0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.prime {
    --clr: var(--prime_rgb);
    --clr_dark: var(--prime_dark_rgb);
    --comp: 255, 255, 255;
    --comp_dark: 255, 255, 255;
}
.primary {
    --clr: var(--primary_rgb);
    --clr_dark: var(--primary_dark_rgb);
    --comp: 255, 255, 255;
    --comp_dark: 255, 255, 255;
}
.success {
    --clr: var(--success_rgb);
    --clr_dark: var(--success_dark_rgb);
    --comp: 255, 255, 255;
    --comp_dark: 255, 255, 255;
}
.error {
    --clr: var(--error_rgb);
    --clr_dark: var(--error_dark_rgb);
    --comp: 255, 255, 255;
    --comp_dark: 255, 255, 255;
}
.info {
    --clr: var(--info_rgb);
    --clr_dark: var(--info_dark_rgb);
    --comp: 255, 255, 255;
    --comp_dark: 255, 255, 255;
}
.warn {
    --clr: var(--warn_rgb);
    --clr_dark: var(--warn_dark_rgb);
    --comp: 0, 0, 0;
    --comp_dark: 255, 255, 255;
}
.light {
    --clr: var(--light_rgb);
    --clr_dark: var(--light_dark_rgb);
    --comp: 0, 0, 0;
    --comp_dark: 0, 0, 0;
}
.dark {
    --clr: var(--dark_rgb);
    --clr_dark: var(--dark_dark_rgb);
    --comp: 240, 240, 240;
    --comp_dark: 255, 255, 255;
}

.solid,
.solid.reverse.hover:hover {
    background: rgba(var(--clr));
    color: rgba(var(--comp));
}
.solid.reverse,
.solid:where(.hovered, .active),
.solid.hover:hover {
    background: rgba(var(--clr_dark));
}

.regular,
.regular.reverse.hover:hover {
    --bdr: rgba(var(--clr), 0.3);
    background: rgba(var(--clr), 0.13);
    color: rgba(var(--clr));
}
.regular.reverse,
.regular:where(.hovered, .active),
.regular.hover:hover {
    --bdr: rgba(var(--clr), 0.6);
    color: rgba(var(--clr_dark));
    background: rgba(var(--clr_dark), 0.22);
}
.regular.bordered {
    border: 1.5px solid var(--bdr);
}
.regular.light {
    color: rgba(var(--comp), 0.6) !important;
}
.regular.solid {
    color: rgba(var(--clr));
    background: rgba(var(--clr), 0.1);
}
.regular.solid:hover {
    color: rgba(var(--comp));
    background: rgba(var(--clr_dark));
}

.thin.thin {
    color: rgba(var(--clr));
    background: transparent;
    border: 1px solid;
    border-color: rgba(var(--clr));
}
.thin:hover {
    color: rgba(var(--clr_dark));
    border-color: rgba(var(--clr_dark));
}
.thin.light {
    color: rgba(var(--comp), 0.6) !important;
}
.thin.solid:hover {
    color: rgba(var(--comp));
    background: rgba(var(--clr));
    border-color: rgba(var(--clr));
}
.thin.regular:hover {
    border-color: rgba(var(--clr_dark), 0.3);
    color: rgba(var(--clr_dark));
    background: rgba(var(--clr_dark), 0.13);
}

.ghost {
    color: rgba(var(--clr));
    background: transparent;
}
.ghost:hover {
    color: rgba(var(--clr_dark));
}
.ghost.light {
    color: rgba(var(--comp), 0.6) !important;
}
.ghost.thin {
    border-color: transparent;
}
.ghost.thin:hover {
    background: transparent;
    border-color: rgba(var(--clr));
    color: rgba(var(--clr));
}
.ghost.regular {
    background: transparent;
}
.ghost.regular:hover {
    color: rgba(var(--clr_dark));
    background: rgba(var(--clr_dark), 0.1);
}
.ghost.solid:hover {
    color: rgba(var(--comp));
    background: rgba(var(--clr));
}