:root {
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 3rem;
--space-xl: 4rem;
--font-xs: 0.7rem;
--font-sub: 0.941rem;
--font-sm: 1rem;
--font-base: 1rem;
--font-md: 1.07rem;
--font-lg: 1.1rem;
--font-xl: 1.3rem;
--font-xxl: 1.4rem;
--font-3xl: 1.5rem;
--color-base: #333333;
--color-base-hover: #6f6f6f;
--color-bg: #ffffff;
--color-green: #28a078;
--color-green-hover: #2cac82;
--color-dgreen: #11855e;
--color-dgreen-hover: #249b73;
--color-lgreen: #e1efec;
--color-gray: #777777;
--color-lgray: #f6f6f6;
--color-white: #ffffff;
--color-navy: #0263a2;
--color-navy-hover: #047ccb;
--color-red: #e03d32;
--color-red-hover: #C3281D;
--border-color: #ccc;
--rounded-all: 9999px;
--rounded-base: 8px;
}

@media (min-width: 768px) {
:root {
--font-xxl: 1.7rem;
--font-3xl: 2rem;
--font-lg: 1.15rem;
--font-xl: 1.5rem;
--space-md: 2rem;
}
}
@media (min-width: 992px) {
:root {
--font-sm: 0.9rem;
}
}