body {
// Color
--st-color-accent: #2563EB;
--st-color-accent-hover: #1D4ED8;
--st-color-heading: #1F2937;
--st-color-body: #4B5563;
--st-color-light-gray: #E5E7EB;
--st-color-placeholder: #6B7280;
--st-color-white: #FFFFFF;
--st-color-favorite: #E91E63;
--st-background-secondary: #F7F7F9;
--st-background-primary: #FFFFFF;
--st-background-light: #F9FAFB;
// Font sizes
--st-font-size-xxl: 30px;
--st-font-size-xl: 24px;
--st-font-size-l: 20px;
--st-font-size-m: 18px;
--st-font-size-s: 16px;
--st-font-size-xs: 14px;
// Font Weight
--st-font-weight-extra-bold: 600;
--st-font-weight-bold: 500;
--st-font-weight-normal: 400;
// Font Line Height
--st-font-line-height-xl: 36px;
--st-font-line-height-l: 32px;
--st-font-line-height-m: 28px;
--st-font-line-height-s: 24px;
--st-font-line-height-xs: 20px;
// Border
--st-border-color: #D1D5DB;
--st-border-radius-4: 4px;
--st-border-radius-3: 3px;
--st-border-radius-2: 2px;
--st-border-radius-1: 1px;
}