@import "./responsive.css";

:root {
  /* Primitive - Product Primary Color */
  --sgds-product-primary-100: #f4f2fe;
  --sgds-product-primary-200: #e1dbfb;
  --sgds-product-primary-300: #c8bdf7;
  --sgds-product-primary-400: #a999f3;
  --sgds-product-primary-500: #8a72ef;
  --sgds-product-primary-600: #6b4feb;
  --sgds-product-primary-700: #523abc;
  --sgds-product-primary-800: #3c2b8a;
  --sgds-product-primary-900: #2a1e61;

  /* Primitive - Purple Color */
  --sgds-purple-100: #fbf0fe;
  --sgds-purple-200: #f2d6fc;
  --sgds-purple-300: #e6adf9;
  --sgds-purple-400: #d983f6;
  --sgds-purple-500: #c94cf2;
  --sgds-purple-600: #ac1cdb;
  --sgds-purple-700: #8516a9;
  --sgds-purple-800: #641180;
  --sgds-purple-900: #460c5a;

  /* Primitive - Cyan Color */
  --sgds-cyan-100: #e0f7fc;
  --sgds-cyan-200: #a8e9f7;
  --sgds-cyan-300: #49d2ef;
  --sgds-cyan-400: #00b4da;
  --sgds-cyan-500: #0092b1;
  --sgds-cyan-600: #00758d;
  --sgds-cyan-700: #005a6d;
  --sgds-cyan-800: #004352;
  --sgds-cyan-900: #002f38;

  /* Primitive - Green Color */
  --sgds-green-100: #e3f9ed;
  --sgds-green-200: #b1edcb;
  --sgds-green-300: #62db96;
  --sgds-green-400: #16bd5e;
  --sgds-green-500: #129a4d;
  --sgds-green-600: #0e7c3d;
  --sgds-green-700: #0b5e2f;
  --sgds-green-800: #084523;
  --sgds-green-900: #063119;

  /* Primitive - Blue Color */
  --sgds-blue-100: #ecf5fe;
  --sgds-blue-200: #c8e2fb;
  --sgds-blue-300: #96c7f7;
  --sgds-blue-400: #60aaf4;
  --sgds-blue-500: #1e87ef;
  --sgds-blue-600: #0269d0;
  --sgds-blue-700: #0151a0;
  --sgds-blue-800: #013c77;
  --sgds-blue-900: #012a54;

  /* Primitive - Yellow Color */
  --sgds-yellow-100: #fef4cb;
  --sgds-yellow-200: #fcde63;
  --sgds-yellow-300: #e5bf29;
  --sgds-yellow-400: #c2a223;
  --sgds-yellow-500: #9d841c;
  --sgds-yellow-600: #7e6917;
  --sgds-yellow-700: #605111;
  --sgds-yellow-800: #483c0d;
  --sgds-yellow-900: #322909;

  /* Primitive - Red Color */
  --sgds-red-100: #fcf1f1;
  --sgds-red-200: #f8d7d7;
  --sgds-red-300: #f1b2b2;
  --sgds-red-400: #e98b8b;
  --sgds-red-500: #e05959;
  --sgds-red-600: #cf2323;
  --sgds-red-700: #a11b1b;
  --sgds-red-800: #791414;
  --sgds-red-900: #550e0e;

  /* Primitive - Gray Color */
  --sgds-gray-000: #ffffff;
  --sgds-gray-50: #f7f7f7;
  --sgds-gray-100: #f3f3f3;
  --sgds-gray-200: #dfdfdf;
  --sgds-gray-300: #c6c6c6;
  --sgds-gray-400: #a5a5a5;
  --sgds-gray-500: #868686;
  --sgds-gray-600: #6b6b6b;
  --sgds-gray-700: #525252;
  --sgds-gray-800: #3b3b3b;
  --sgds-gray-900: #2a2a2a;
  --sgds-gray-1000: #1a1a1a;
  --sgds-gray-1100: #0e0e0e;

  /* Primitive - Border Width */
  --sgds-border-width-0: 0px;
  --sgds-border-width-1: 1px;
  --sgds-border-width-2: 2px;
  --sgds-border-width-3: 3px;
  --sgds-border-width-4: 4px;
  --sgds-form-border-width-default: var(--sgds-border-width-1);
  --sgds-form-border-width-thick: var(--sgds-border-width-2);

  /* Primitive - Border Radius */
  --sgds-border-radius-none: 0px;
  --sgds-border-radius-xs: 2px;
  --sgds-border-radius-sm: 4px;
  --sgds-border-radius-md: 8px;
  --sgds-border-radius-lg: 12px;
  --sgds-border-radius-xl: 16px;
  --sgds-border-radius-2-xl: 24px;
  --sgds-border-radius-3-xl: 32px;
  --sgds-border-radius-full: 999px;
  --sgds-form-border-radius-none: var(--sgds-border-radius-none);
  --sgds-form-border-radius-xs: var(--sgds-border-radius-xs);
  --sgds-form-border-radius-sm: var(--sgds-border-radius-sm);
  --sgds-form-border-radius-md: var(--sgds-border-radius-md);
  --sgds-form-border-radius-full: var(--sgds-border-radius-full);

  /* Primitive - Breakpoint */
  --sgds-breakpoint-xs: var(--sgds-dimension-320);
  --sgds-breakpoint-sm: var(--sgds-dimension-512);
  --sgds-breakpoint-md: var(--sgds-dimension-768);
  --sgds-breakpoint-lg: var(--sgds-dimension-1024);
  --sgds-breakpoint-xl: var(--sgds-dimension-1280);
  --sgds-breakpoint-2-xl: var(--sgds-dimension-1440);

  /* Primitive - Breakpoint with sticky side bar*/
  --sgds-breakpoint-sbar-md: var(--sgds-dimension-768);
  --sgds-breakpoint-sbar-lg: var(--sgds-dimension-1024);
  --sgds-breakpoint-sbar-xl: var(--sgds-dimension-1280);
  --sgds-breakpoint-sbar-2-xl: var(--sgds-dimension-1440);

  /* Primitive - Font Family */
  --sgds-font-family-brand: "Inter", system-ui, sans-serif;

  /* Primitive - Font Weight */
  --sgds-font-weight-light: 300;
  --sgds-font-weight-regular: 400;
  --sgds-font-weight-semibold: 600;
  --sgds-font-weight-bold: 700;

  /* Primitive - Font Size */
  /* --sgds-font-size-0 to --sgds-font-size-9 is deprecated in v3.7.0 */
  --sgds-font-size-0: 0.75rem;
  --sgds-font-size-1: 0.875rem;
  --sgds-font-size-2: 1rem;
  --sgds-font-size-3: 1.25rem;
  --sgds-font-size-4: 1.5rem;
  --sgds-font-size-5: 1.75rem;
  --sgds-font-size-6: 2rem;
  --sgds-font-size-7: 2.5rem;
  --sgds-font-size-8: 3rem;
  --sgds-font-size-9: 3.5rem;
  --sgds-font-size-12: 0.75rem;
  --sgds-font-size-14: 0.875rem;
  --sgds-font-size-16: 1rem;
  --sgds-font-size-18: 1.125rem;
  --sgds-font-size-20: 1.25rem;
  --sgds-font-size-22: 1.375rem;
  --sgds-font-size-24: 1.5rem;
  --sgds-font-size-26: 1.625rem;
  --sgds-font-size-28: 1.75rem;
  --sgds-font-size-30: 1.875rem;
  --sgds-font-size-32: 2rem;
  --sgds-font-size-36: 2.25rem;
  --sgds-font-size-40: 2.5rem;
  --sgds-font-size-44: 2.75rem;
  --sgds-font-size-48: 3rem;
  --sgds-font-size-52: 3.25rem;
  --sgds-font-size-56: 3.5rem;

  /* Primitive - Icon Size */
  --sgds-icon-size-xs: 0.75rem;
  --sgds-icon-size-sm: 1rem;
  --sgds-icon-size-md: 1.25rem;
  --sgds-icon-size-lg: 1.5rem;
  --sgds-icon-size-xl: 2rem;
  --sgds-icon-size-2-xl: 3rem;
  --sgds-icon-size-3-xl: 4rem;

  /* Primitive - Letter Spacing */
  --sgds-letter-spacing-tighter: -1px;
  --sgds-letter-spacing-tight: -0.4px;
  --sgds-letter-spacing-normal: 0px;
  --sgds-letter-spacing-wide: 1px;
  --sgds-letter-spacing-wider: 2px;

  /* Primitive - Line Height */
  --sgds-line-height-16: 16px;
  --sgds-line-height-20: 20px;
  --sgds-line-height-24: 24px;
  --sgds-line-height-28: 28px;
  --sgds-line-height-32: 32px;
  --sgds-line-height-36: 36px;
  --sgds-line-height-40: 40px;
  --sgds-line-height-44: 44px;
  --sgds-line-height-48: 48px;
  --sgds-line-height-52: 52px;
  --sgds-line-height-56: 56px;
  --sgds-line-height-60: 60px;
  --sgds-line-height-64: 64px;

  /* Primitive - Opacity */
  --sgds-opacity-0: 0;
  --sgds-opacity-3: 0.03;
  --sgds-opacity-5: 0.05;
  --sgds-opacity-10: 0.1;
  --sgds-opacity-20: 0.2;
  --sgds-opacity-30: 0.3;
  --sgds-opacity-40: 0.4;
  --sgds-opacity-50: 0.5;
  --sgds-opacity-60: 0.6;
  --sgds-opacity-70: 0.7;
  --sgds-opacity-80: 0.8;
  --sgds-opacity-90: 0.9;
  --sgds-opacity-100: 1;

  /* Primitive - Paragraph Spacing */
  --sgds-paragraph-spacing-none: 0;
  --sgds-paragraph-spacing-sm: 0.5rem;
  --sgds-paragraph-spacing-md: 1rem;
  --sgds-paragraph-spacing-lg: 1.5rem;
  --sgds-paragraph-spacing-xl: 2rem;

  /* Primitive - Spacer */
  --sgds-spacer-0: 0rem;
  --sgds-spacer-1: 0.125rem;
  --sgds-spacer-2: 0.25rem;
  --sgds-spacer-3: 0.5rem;
  --sgds-spacer-4: 0.75rem;
  --sgds-spacer-5: 1rem;
  --sgds-spacer-6: 1.25rem;
  --sgds-spacer-7: 1.5rem;
  --sgds-spacer-8: 2rem;
  --sgds-spacer-9: 3rem;
  --sgds-spacer-10: 4rem;
  --sgds-spacer-11: 6rem;
  --sgds-spacer-12: 8rem;

  /* Primitive - Dimension */
  --sgds-dimension-0: 0px;
  --sgds-dimension-1: 1px;
  --sgds-dimension-2: 2px;
  --sgds-dimension-4: 4px;
  --sgds-dimension-8: 8px;
  --sgds-dimension-12: 12px;
  --sgds-dimension-16: 16px;
  --sgds-dimension-20: 20px;
  --sgds-dimension-24: 24px;
  --sgds-dimension-28: 28px;
  --sgds-dimension-32: 32px;
  --sgds-dimension-40: 40px;
  --sgds-dimension-48: 48px;
  --sgds-dimension-52: 52px;
  --sgds-dimension-56: 56px;
  --sgds-dimension-60: 60px;
  --sgds-dimension-64: 64px;
  --sgds-dimension-68: 68px;
  --sgds-dimension-72: 72px;
  --sgds-dimension-76: 76px;
  --sgds-dimension-80: 80px;
  --sgds-dimension-88: 88px;
  --sgds-dimension-96: 96px;
  --sgds-dimension-112: 112px;
  --sgds-dimension-120: 120px;
  --sgds-dimension-128: 128px;
  --sgds-dimension-132: 132px;
  --sgds-dimension-136: 136px;
  --sgds-dimension-144: 144px;
  --sgds-dimension-160: 160px;
  --sgds-dimension-168: 168px;
  --sgds-dimension-192: 192px;
  --sgds-dimension-224: 224px;
  --sgds-dimension-256: 256px;
  --sgds-dimension-280: 280px;
  --sgds-dimension-288: 288px;
  --sgds-dimension-320: 320px;
  --sgds-dimension-328: 328px;
  --sgds-dimension-332: 332px;
  --sgds-dimension-340: 340px;
  --sgds-dimension-344: 344px;
  --sgds-dimension-360: 360px;
  --sgds-dimension-384: 384px;
  --sgds-dimension-400: 400px;
  --sgds-dimension-480: 480px;
  --sgds-dimension-512: 512px;
  --sgds-dimension-640: 640px;
  --sgds-dimension-688: 688px;
  --sgds-dimension-768: 768px;
  --sgds-dimension-800: 800px;
  --sgds-dimension-840: 840px;
  --sgds-dimension-864: 864px;
  --sgds-dimension-872: 872px;
  --sgds-dimension-888: 888px;
  --sgds-dimension-960: 960px;
  --sgds-dimension-1024: 1024px;
  --sgds-dimension-1168: 1168px;
  --sgds-dimension-1280: 1280px;
  --sgds-dimension-1312: 1312px;
  --sgds-dimension-1440: 1440px;

  /* Semantic - Padding */
  --sgds-padding-none: var(--sgds-spacer-0);
  --sgds-padding-3-xs: var(--sgds-spacer-1);
  --sgds-padding-2-xs: var(--sgds-spacer-2);
  --sgds-padding-xs: var(--sgds-spacer-3);
  --sgds-padding-sm: var(--sgds-spacer-4);
  --sgds-padding-md: var(--sgds-spacer-5);
  --sgds-padding-lg: var(--sgds-spacer-6);
  --sgds-padding-xl: var(--sgds-spacer-7);
  --sgds-padding-2-xl: var(--sgds-spacer-8);
  --sgds-padding-3-xl: var(--sgds-spacer-9);
  --sgds-padding-4-xl: var(--sgds-spacer-10);
  --sgds-padding-5-xl: var(--sgds-spacer-11);
  --sgds-form-padding-x: var(--sgds-padding-md);
  --sgds-form-padding-y: var(--sgds-padding-sm);
  --sgds-form-padding-inline-xs: var(--sgds-padding-3-xs);
  --sgds-form-padding-inline-sm: var(--sgds-padding-2-xs);
  --sgds-form-padding-inline-md: var(--sgds-padding-xs);
  --sgds-form-padding-inline-lg: var(--sgds-padding-sm);
  --sgds-form-padding-inline-xl: var(--sgds-padding-md);

  /* NEW - MARGIN */
  --sgds-margin-none: var(--sgds-spacer-0);
  --sgds-margin-3-xs: var(--sgds-spacer-1);
  --sgds-margin-2-xs: var(--sgds-spacer-2);
  --sgds-margin-xs: var(--sgds-spacer-3);
  --sgds-margin-sm: var(--sgds-spacer-4);
  --sgds-margin-md: var(--sgds-spacer-5);
  --sgds-margin-lg: var(--sgds-spacer-6);
  --sgds-margin-xl: var(--sgds-spacer-7);
  --sgds-margin-2-xl: var(--sgds-spacer-8);
  --sgds-margin-3-xl: var(--sgds-spacer-9);
  --sgds-margin-4-xl: var(--sgds-spacer-10);
  --sgds-margin-5-xl: var(--sgds-spacer-11);

  --sgds-gutter-sm: var(--sgds-dimension-16);
  --sgds-gutter-md: var(--sgds-dimension-24);
  --sgds-gutter-lg: var(--sgds-dimension-32);

  --sgds-gap-none: var(--sgds-spacer-0);
  --sgds-gap-2-xs: var(--sgds-spacer-2);
  --sgds-gap-xs: var(--sgds-spacer-3);
  --sgds-gap-sm: var(--sgds-spacer-4);
  --sgds-gap-md: var(--sgds-spacer-5);
  --sgds-gap-lg: var(--sgds-spacer-6);
  --sgds-gap-xl: var(--sgds-spacer-7);
  --sgds-gap-2-xl: var(--sgds-spacer-8);
  --sgds-gap-3-xl: var(--sgds-spacer-9);
  --sgds-form-gap-sm: var(--sgds-gap-2-xs);
  --sgds-form-gap-md: var(--sgds-gap-xs);
  --sgds-form-gap-lg: var(--sgds-gap-sm);
  --sgds-form-gap-xl: var(--sgds-gap-md);
  --sgds-form-gap-2-xl: var(--sgds-gap-xl);

  --sgds-form-height-3-xs: var(--sgds-dimension-12);
  --sgds-form-height-2-xs: var(--sgds-dimension-16);
  --sgds-form-height-xs: var(--sgds-dimension-20);
  --sgds-form-height-sm: var(--sgds-dimension-24);
  --sgds-form-height-md: var(--sgds-dimension-32);
  --sgds-form-height-lg: var(--sgds-dimension-40);
  --sgds-form-height-xl: var(--sgds-dimension-48);
  --sgds-form-height-2-xl: var(--sgds-dimension-56);

  --sgds-form-width-3-xs: var(--sgds-dimension-12);
  --sgds-form-width-2-xs: var(--sgds-dimension-16);
  --sgds-form-width-xs: var(--sgds-dimension-24);
  --sgds-form-width-sm: var(--sgds-dimension-32);
  --sgds-form-width-md: var(--sgds-dimension-40);
  --sgds-form-width-lg: var(--sgds-dimension-48);
  --sgds-form-width-xl: var(--sgds-dimension-56);
  --sgds-form-width-2-xl: var(--sgds-dimension-64);
  --sgds-form-width-3-xl: var(--sgds-dimension-72);
  --sgds-form-width-4-xl: var(--sgds-dimension-80);

  /* Semantic - Form Icon Size */
  --sgds-form-icon-size-sm: var(--sgds-icon-size-sm);
  --sgds-form-icon-size-md: var(--sgds-icon-size-md);
  --sgds-form-icon-size-lg: var(--sgds-icon-size-lg);

  --sgds-outline-focus: var(--sgds-border-width-2) solid var(--sgds-blue-400);
  --sgds-outline-offset-focus: calc(-1 * var(--sgds-border-width-2));
  --sgds-form-outline-focus: var(--sgds-outline-focus);
  --sgds-form-outline-offset-focus: var(--sgds-outline-offset-focus);

  /* Semantic - Text Max Width */
  --sgds-text-max-width: var(--sgds-dimension-864);

  /* Semantic - Container Max Width */
  --sgds-container-max-width-md: var(--sgds-dimension-768);
  --sgds-container-max-width-lg: var(--sgds-dimension-888);
  --sgds-container-max-width-xl: var(--sgds-dimension-1168);
  --sgds-container-max-width-2-xl: var(--sgds-dimension-1312);
  --sgds-container-max-width-3-xl: var(--sgds-dimension-1440);

  /* Masthead and Mainnav Max Width and Padding */
  --sgds-mainnav-max-width: 1440px;
  --sgds-mainnav-padding-x: 2rem;
  --sgds-mainnav-mobile-padding-x: 1.25rem;

  /* Foundation - Motion Easing  */
  --sgds-motion-easing-enter: cubic-bezier(0.1, 0, 0.5, 0);
  --sgds-motion-easing-exit: cubic-bezier(0.15, 0.6, 0.6, 1);
  --sgds-motion-easing-standard: cubic-bezier(0.25, 0, 0.25, 1);

  /* Foundation - Motion Duration  */
  --sgds-motion-duration-faster: 100ms;
  --sgds-motion-duration-fast: 200ms;
  --sgds-motion-duration-standard: 300ms;
  --sgds-motion-duration-slow: 400ms;
  --sgds-motion-duration-slower: 500ms;

  /* Foundation - Z-Index Primitive */
  --sgds-z-index-0: 0;
  --sgds-z-index-100: 100;
  --sgds-z-index-200: 200;
  --sgds-z-index-400: 400;
  --sgds-z-index-800: 800;
  --sgds-z-index-1600: 1600;

  /* Semantic - Z-Index */
  --sgds-z-index-base: var(--sgds-z-index-0);
  --sgds-z-index-raised: var(--sgds-z-index-100);
  --sgds-z-index-sticky: var(--sgds-z-index-200);
  --sgds-z-index-floating: var(--sgds-z-index-400);
  --sgds-z-index-overlay: var(--sgds-z-index-800);
  --sgds-z-index-modal: var(--sgds-z-index-1600);
  /* Elevation */
  --sgds-elevation-surface-1: 0 0 2px 0 rgba(14, 14, 14, 0.16);
  --sgds-elevation-surface-2: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 2px 4px 0 rgba(14, 14, 14, 0.08);
  --sgds-elevation-surface-3: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 4px 8px 0 rgba(14, 14, 14, 0.08);
  --sgds-elevation-surface-4: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 8px 16px 0 rgba(14, 14, 14, 0.08);
  --sgds-elevation-surface-5: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 16px 32px 0 rgba(14, 14, 14, 0.08);
  --sgds-elevation-edge-top: 0 -2px 4px 0 rgba(14, 14, 14, 0.08);
  --sgds-elevation-edge-bottom: 0 2px 4px 0 rgba(14, 14, 14, 0.08);
}