:root {
    --color-primary: #009b4b;
    --color-primary-hover: #008943;
    --color-secondary: #036093;
    --color-black: #000000;
    --color-dark: #222222;
    --color-grey-mid: #4a4a4a;
    --color-grey-soft: #767676;
    --color-grey-light: #e6e8ee;
    --color-white: #ffffff;
    --color-bg: #f3f6f8;
    --color-bg-white: #ffffff;
    --font-sans: 'Helvetica', Arial, sans-serif;
    --text-base: 17.4282px;
    --text-sm: 15.7146px;
    --text-xs: 12px;
    --text-lg: 20px;
    --text-xl: 21.2746px;
    --text-3xl: 28px;
    --text-4xl: 36px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-sm: rgba(0,0,0,0.145) 0px 4px 4px 0px;
    --duration-slow: 750ms;
    --ease-default: ease;
}

[data-theme="dark"] {
    --color-bg: #0f0f0f;
    --color-bg-white: #1a1a1a;
    --color-dark: #f0f0f0;
    --color-grey-mid: #b0b0b0;
    --color-grey-soft: #8a8a8a;
    --color-grey-light: #2e2e2e;
    --color-black: #000000;
}