:root {
  /* main colors*/
  --main-color-100: #FFFFFF;
  --main-color-200: #EAECF0;
  --main-color-300: #D0D5DD;
  --main-color-400: #CBD0D8;
  --main-color-500: #98A2B3;
  --main-color-600: #D9D9D9;
  --main-color-700: #B7B7B7;
  --main-color-800: #344054;
  --main-color-900: #D9E9FF;
  --main-color-950: #F1F1F1;
  --main-color-1000: #FDFDFD;
  --main-color-1100: #444B59;
  --main-color-1200: #303030;
  --main-color-1300: rgba(175, 175, 175, 0.15);

  /* primary brand color — mapped to landing page palette */
  --primary-brand-color-100: var(--brand-logo-start);
  --primary-brand-color-200: var(--brand-blue);
  --primary-brand-color-300: var(--brand-navy);
  --primary-brand-color-400: rgba(37, 99, 235, 0.08);
  --primary-brand-color-500: var(--brand-surface-subtle);

  /* secondary brand color */
  --secondary-brand-color-100: var(--brand-pink);
  --secondary-brand-color-200: var(--brand-purple);
  --secondary-brand-color-300: rgba(91, 33, 182, 0.08);
  --secondary-brand-color-400: rgba(236, 72, 153, 0.08);
  --secondary-brand-color-450: rgba(91, 33, 182, 0.15);
  --secondary-brand-color-500: var(--brand-indigo);

  /* linear gradient — used as linear-gradient(var(--linear-gradient)) */
  --linear-gradient: to right, #1d4ed8, #3730a3, #4c1d95;

  --light-blue-100: var(--brand-surface-subtle);

  /* yellow */
  --yellow-color-100: #F9B31C;

  /* green colors */
  --green-color-100: #66C888;
  --green-color-200: #17B26A;
  --green-color-300: #66c88814;

  /* orange colors */
  --orange-color-100: #F5DF12;
  --orange-color-200: #E37055;
  --orange-color-300: #F59312;
  --orange-color-400: #FEF5EA;
  --orange-color-400: #FEF5EA;
  --orange-color-500: rgba(245, 147, 18, 0.08);
  --orange-color-600: rgba(242, 215, 0, 0.08);
  --orange-color-700: #D96832;
  --orange-color-800: #F5DF122E;

  /* red colors */
  --red-color-100: #FDA29B;
  --red-color-200: #D92D20;
  --red-color-300: #ffeeec;
  --red-color-400: #d92d2014;
  --red-color-500: #FFEAE9;

  /* pink colors */
  --pink-color-100:#F8ECFE;

  /* shadows */
  --main-shadow-100: 1px 0px 9px 0px rgba(0, 0, 0, 0.09);
  --main-shadow-200: 0px -1px 0px 0px #CCC inset, 1px 0px 0px 0px #EBEBEB inset, -1px 0px 0px 0px #EBEBEB inset, 0px 0px 0px 0px rgba(0, 0, 0, 0.40);
  --main-shadow-600: 0px 12px 16px -4px rgba(36, 36, 36, 0.08), 0px 4px 6px -2px rgba(36, 36, 36, 0.03);
  --main-shadow-700: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

  --main-shadow-300: 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px 4px 6px -2px rgba(26, 26, 26, 0.20);
  --main-shadow-400: 0px 12px 16px -4px rgba(255, 255, 255, 0.08), 0px 4px 6px -2px rgba(255, 255, 255, 0.03);
  --main-shadow-500: 0px 4px 4px 0px rgba(0, 0, 0, 0.18);

  --main-shadow-600: 0 4px 12px 0 rgba(0, 0, 0, 0.06);

  --border-color-400 : #e0e0e0;
}


:root[data-theme="light"] {
  /* background colors — soft Artisan-like canvas */
  --background-color-100: #FFFFFF;
  --background-color-200: #f5f7fb;
  --background-color-300: #FFFFFF;
  --background-color-350: #EAECF0;
  --background-color-400: #F9FAFB;
  --background-color-450: #EAECF0;
  --background-color-500: #FFFFFF;
  --background-color-600: #CBD0D8;
  --background-color-650: var(--brand-surface-subtle);
  --background-color-700: #f5f7fb;
  --background-color-750: #CBD0D8;
  --background-color-800: #f8fafc;
  --background-color-900: #E8F1FD;
  --background-color-950: #98A2B3;
  --background-color-1000: #F3F4F6;
  --background-color-1100: #EAECF0;
  --background-color-1200: #f5f7fb;
  --background-color-1300: #000000;
  --background-color-1400: #F8F9FA;

  /* text colors */
  --text-color-100: #000000;
  --text-color-200: #444B59;
  --text-color-300: #344054;
  --text-color-400: #303030;
  --text-color-500: var(--brand-navy);
  --text-color-600: #444B59;
  --text-color-700: #656565;

  /* border colors */
  --border-color-100: #F6F9FE;
  --border-color-200: #D0D5DD;
  --border-color-300: #D0D5DD;
  --border-color-400: #F0F0F0;
  --border-color-500: #EAECF0;
  --border-color-600: #EAECF0;
  --border-color-700: #303030;

  /* shadow */
  --shadow-100: 0px 0px 13.333px 2.667px rgba(0, 0, 0, 0.08);
  --shadow-200: 0px 12px 16px -4px rgba(36, 36, 36, 0.08), 0px 4px 6px -2px rgba(36, 36, 36, 0.03);
  --shadow-300: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-400: 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px 4px 6px -2px rgba(26, 26, 26, 0.20);
  --shadow-500: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-600: 0 0 12px 0 rgba(0, 0, 0, 0.15);
}

:root[data-theme="dark"] {
  /* background colors */
  --background-color-100: #202731;
  --background-color-200: #202731;
  --background-color-300: #2c3541;
  --background-color-350: #202731;
  --background-color-400: #344054;
  --background-color-450: #2c3541;
  --background-color-500: #3F4A5C;
  --background-color-600: #344054;
  --background-color-650: #3F4A5C;
  --background-color-700: #3F4A5C;
  --background-color-750: #98A2B3;
  --background-color-800: #4B5464;
  --background-color-900: #E8F1FD;
  --background-color-950: #202731;
  --background-color-1000: #3F4A5C;
  --background-color-1100: #98A2B3;
  --background-color-1200: #2C3541;
  --background-color-1300: #FFFFFF;
  --background-color-1400: #344054;

  /* text colors */
  --text-color-100: #FFFFFF;
  --text-color-200: #D0D5DD;
  --text-color-300: #FFFFFF;
  --text-color-400: #FFFFFF;
  --text-color-500: var(--brand-navy);
  --text-color-600: #444B59;
  --text-color-700: #FFFFFF;

  /* border colors */
  --border-color-100: #000000;
  --border-color-200: #98A2B3;
  --border-color-300: #3F4A5C;
  --border-color-400: #444B59;
  --border-color-500: #303030;
  --border-color-600: #D0D5DD;
  --border-color-700: var(--brand-blue);

  /* shadow */
  --shadow-100: 0px 0px 13.333px 2.667px rgba(255, 255, 255, 0.08);
  --shadow-200: 0px 12px 16px -4px rgba(255, 255, 255, 0.08), 0px 4px 6px -2px rgba(255, 255, 255, 0.03);
  --shadow-300: 0px 12px 16px -4px rgba(255, 255, 255, 0.08), 0px 4px 6px -2px rgba(255, 255, 255, 0.03);
  --shadow-400: 0px 12px 16px -4px rgba(255, 255, 255, 0.08), 0px 4px 6px -2px rgba(255, 255, 255, 0.03);
  --shadow-500: 0px 8px 8px 0px rgba(255, 255, 255, 0.08), 0px 4px 6px -2px rgba(255, 255, 255, 0.03);
}