:root[data-theme='blue'] {
  --connect-color-brand-100: 230 247 246; /* #E6F7F6 */
  --connect-color-brand-200: 218 245 244; /* #DAF5F4 */
  --connect-color-brand-500: 71 213 205; /* #47D5CD */
  --connect-color-brand-550: 44 195 188; /* #2CC3BC */
  --connect-color-brand-600: 38 169 161; /* #26A9A1 */
  --connect-color-brand-bg-text: var(--connect-color-brown-500);
  --checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.523" height="21.408" viewBox="0 0 23.523 21.408"> <path id="check_mark" data-name="check mark" d="M10.4,24.816l-8.3-8.3L4.228,14.4l5.9,5.9L23.261,3.408l2.368,1.842Z" transform="translate(-2.106 -3.408)" fill="%2347d5cd"/></svg>');
  --radio-button-checked: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9.5" fill="%23d3f4f2" stroke="%2347d5cd"/><circle cx="10" cy="10" r="4" fill="%2347d5cd"/></svg>');
}

:root[data-theme='rose'] {
  --connect-color-brand-100: 248 232 237; /* #F8E8ED */
  /* --connect-color-brand-200: TODO; */
  --connect-color-brand-500: 188 30 83; /* #BC1E53 */
  --connect-color-brand-550: 152 12 57; /* #980C39 */
  --connect-color-brand-600: 152 12 57; /* #980C39 */
  --connect-color-brand-bg-text: var(--connect-color-white);
  --checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.523" height="21.408" viewBox="0 0 23.523 21.408"> <path id="check_mark" data-name="check mark" d="M10.4,24.816l-8.3-8.3L4.228,14.4l5.9,5.9L23.261,3.408l2.368,1.842Z" transform="translate(-2.106 -3.408)" fill="%23BC1E53"/></svg>');
  --radio-button-checked: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9.5" fill="%23F4D6E1" stroke="%23BC1E53"/><circle cx="10" cy="10" r="4" fill="%23BC1E53"/></svg>');
}

:root[data-theme='golden'] {
  --connect-color-brand-100: 252 237 202; /* #FCEDCA */
  /* --connect-color-brand-200: TODO; */
  --connect-color-brand-500: 244 184 50; /* #F4B832 */
  --connect-color-brand-550: 219 151 0; /* #DB9700 */
  --connect-color-brand-600: 219 151 0; /* #DB9700 */
  --connect-color-brand-bg-text: var(--connect-color-gray-500);
  --connect-color-brown-500: var(--connect-color-gray-500);
  --checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.523" height="21.408" viewBox="0 0 23.523 21.408"> <path id="check_mark" data-name="check mark" d="M10.4,24.816l-8.3-8.3L4.228,14.4l5.9,5.9L23.261,3.408l2.368,1.842Z" transform="translate(-2.106 -3.408)" fill="%23F4B832"/></svg>');
  --radio-button-checked: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9.5" fill="%23FFF2CC" stroke="%23F4B832"/><circle cx="10" cy="10" r="4" fill="%23F4B832"/></svg>');
}

:root {
  /* COLORS */
  --connect-color-brown-100: 244 243 240; /* Greige #F4F3F0 */
  --connect-color-brown-200: 238 235 230; /* Light Brown #EEEBE6 */
  --connect-color-brown-400: 187 173 143; /* Light Chocolate #BBAD8F */
  --connect-color-brown-500: 74 60 49; /* Chocolate #4A3C31; NOTE: this is a default text color, it doesn't have to be brown */
  --connect-color-white: 255 255 255; /* White #FFFFFF */
  --connect-color-gray-25: 245 245 245; /* Very Light Gray 01 #F5F5F5 */
  --connect-color-gray-50: 240 240 240; /* Very Light Gray 02 #F0F0F0 */
  --connect-color-gray-75: 237 235 230; /* Light Grayish #EDEBE6 */
  --connect-color-gray-100: 209 206 204; /* Light Gray 01 #D1CECC */
  --connect-color-gray-200: 186 186 186; /* Light Gray 02 #BABABA */
  --connect-color-gray-250: 174 172 169; /* Gray 01 #AEACA9 */
  --connect-color-gray-300: 160 156 152; /* Gray 02 #A09C98 */
  --connect-color-gray-325: 129 126 123; /* Medium Gray #817E7B */
  --connect-color-gray-350: 128 128 128; /* Dark Gray 01 #808080 */
  --connect-color-gray-375: 101 101 101; /* Dark Gray 02 #656565 */
  --connect-color-gray-400: 96 95 94; /* Dark Gray 03 #605F5E */
  --connect-color-gray-500: 65 65 65; /* Dark Gray 04 #414141 */
  --connect-color-black: 0 0 0; /* Black #000000 */
  --connect-color-shadow-300: 214 214 214; /* Shadow #00000029 */
  --connect-color-red-100: 249 213 213; /* Red #F9D5D5 */
  --connect-color-red-500: 225 44 44; /* Red #E12C2C */
  --connect-color-yellow-300: 255 250 186; /* Light Yellow #FFFABA */
  --connect-color-yellow-400: 255 196 101; /* Yellow #FFC465 */
  --connect-color-yellow-700: 197 169 0; /* Golden #C5A900 */
  --connect-color-blue-400: 66 133 244; /* Blue #4285F4 */
  --connect-color-green-400: 79 177 5; /* Green #4FB105 */

  /* FONTS */
  --connect-font-sans-serif: 'Lato';
  --connect-font-serif: 'MrsEaves';

  --connect-font-size-14: 14px;
  --connect-font-size-16: 16px;
  --connect-font-size-18: 18px;
  --connect-font-size-20: 20px;
  --connect-font-size-40: 40px;
  --connect-font-size-55: 55px;
  --connect-font-size-130: 130px;

  --connect-line-spacing-19: 19px;
  --connect-line-spacing-24: 24px;
  --connect-line-spacing-28: 28px;
  --connect-line-spacing-40: 40px;
  --connect-line-spacing-44: 44px;
  --connect-line-spacing-144: 144px;

  /* CHARACTER STYLES */
  --connect-character-spacing-0: 0px;
  --connect-character-spacing-0-35: 0.35px;
  --connect-character-spacing-0-45: 0.45px;
  --connect-character-spacing-1: 1px;
  --connect-character-spacing-1-6: 1.6px;
  --connect-character-spacing-1-8: 1.8px;
  --connect-character-spacing-2: 2px;
  --connect-character-spacing-3-25: 3.25px;

  /* SPACINGS */
  --connect-spacing-0: 0;
  --connect-spacing-sm: 9px;
  --connect-spacing-md: 15px;
  --connect-spacing-lg: 20px;
  --connect-spacing-xl: 30px;
  --connect-spacing-xxl: 40px;
  --connect-spacing-xxxl: 60px;

  /* BORDERS AND SHADOWS */
  --connect-shadow-md: 0px 0px 6px #00000040;
  --connect-shadow-lg: 0px 0px 3px #00000080;
  --connect-shadow-xl: 0px 3px 6px #00000029;

  /* PAGE AND CONTAINER WIDTHS */
  --connect-content-width: 1200px;
  --connect-page-width: 1680px;
}