:root, :host {
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --color-background: hsl(0, 0%, 100%);
    --color-foreground: hsl(0, 0%, 21%);
    --color-background-disabled: hsla(0, 0%, 91%, 1);
    --color-text-disabled: hsla(0, 0%, 63%, 1);
    --color-primary: hsl(18, 100%, 50%);
    --color-primary-hover: hsla(358, 100%, 38%, 1);
    --color-primary-foreground: hsl(0, 0%, 100%);
    --color-primary-subtle: hsl(18, 100%, 95%);
    --color-primary-subtle-2: hsl(17, 100%, 75%);
    --color-primary-60: #388bff;
    --color-primary-70: #1c77ff;
    --color-tertiary: hsla(0, 0%, 96%);
    --color-success-0: hsl(129, 66%, 91%);
    --color-success-50: hsl(116, 43%, 51%);
    --color-warning-0: hsl(27 100% 94%);
    --color-warning-50: hsl(35 100% 55%);
    --color-neutral-10: hsla(225, 18%, 92%, 1);
    --color-neutral-20: hsl(225 18% 88%);
    --color-neutral-50: hsla(229, 10%, 56%, 1);
    --color-neutral-60: hsla(229, 9%, 46%, 1);
    --color-neutral-70: hsla(230, 10%, 36%, 1);
    --color-neutral-80: hsla(227, 10%, 27%, 1);
    --color-neutral-90: hsla(228, 11%, 18%, 1);
    --color-alpha-primary-4: hsla(212, 100%, 50%, 0.6);
    --color-alpha-primary-5: hsla(212, 100%, 50%, 0.8);
    --color-alpha-neutral-1: hsla(228, 11%, 18%, 0.06);
    --color-alpha-neutral-2: hsla(228, 11%, 18%, 0.2);
    --color-alpha-neutral-3: hsla(228, 11%, 18%, 0.4);
    --color-alpha-area-disabled: hsla(228, 16%, 94%, 0.4);
    --color-border: hsla(223, 17%, 92%, 1);
    --color-card-bg: hsla(228, 11%, 18%, 0.02);
    --color-card-border: hsl(222.86, 17.07%, 91.96%);
    /* Gray Light */
    --color-gray-25: hsla(0, 0%, 99%, 1);
    --color-gray-50: hsla(0, 0%, 98%, 1);
    --color-gray-100: hsla(0, 0%, 96%, 1);
    --color-gray-200: hsla(210, 5%, 92%, 1);
    --color-gray-300: hsla(216, 6%, 85%, 1);
    --color-gray-400: hsla(222, 6%, 66%, 1);
    --color-gray-500: hsla(220, 6%, 47%, 1);
    --color-gray-600: hsla(220, 8%, 35%, 1);
    --color-gray-700: hsla(221, 11%, 29%, 1);
    --color-gray-800: hsla(220, 20%, 18%, 1);
    --color-gray-900: hsla(220, 24%, 12%, 1);
    --color-gray-950: hsla(218, 29%, 5%, 1);
    /* Surface */
    --color-surface: hsla(0, 0%, 97%, 1);
    --color-surface-low: hsla(0, 0%, 97%, 0.5);
    --color-surface-medium: hsla(0, 0%, 63%, 1);
    --color-surface-high: hsla(0, 0%, 21%, 1);
    --shadow-box: 0 4px 15px 0 rgba(33, 33, 33, 0.15);
    --shadow-card: 0 4px 12px 0 rgba(41, 43, 51, 0.06);
    --shadow-card-1: 0 4px 12px 4px rgba(41, 43, 51, 0.06);
    --animate-fade-in: fade-in 200ms ease-in-out;
    --animate-fade-out: fade-out 200ms ease-in-out;
    --animate-fade-in-scale: fade-in-scale 200ms ease-out;
    --animate-fade-out-scale: fade-out-scale 200ms ease-in;
}