:root {
  /* Brand Colors */
  --brand-colors-eyes: #5778ee;
  --brand-colors-black: #1e1e1e;
  --brand-colors-violet: #9554ff;

  /* Gradients */
  --gradients-brand-start: #de8fff;
  --gradients-brand-end: #3d73eb;
  --gradients-brand-start-light: #de8fff33;
  --gradients-brand-end-light: #3d73eb33;
  --gradients-banner-start: #5e17eb;
  --gradients-banner-end: #8982ff;
  --gradients-circle-start: #6f6bf2;
  --gradients-circle-end: #ffffff;

  /* Text & Icons Colors */
  --text-icons-neutral-100: #fafafa;
  --text-icons-neutral-300: #d5d7db;
  --text-icons-neutral-400: #a3a4ac;
  --text-icons-neutral-700: #525358;
  --text-icons-neutral-800: #2e2c2c;
  --text-icons-neutral-900: #0d0d0d;
  --text-icons-neutral-900-transparent: #0d0d0db2;
  --text-icons-tonal-200: #efeeff;
  --text-icons-tonal-600: #8982ff;
  --text-icons-tonal-700: #6c63ff;
  --text-icons-tonal-800: #563cf9;
  --text-icons-white: #f6f7fb;
  --text-icons-accent-main: #6c63ff;

  /* Surfaces */
  --surfaces-white: #fafafa;
  --surfaces-neutral-200: #f6f7fb;
  --surfaces-neutral-300: #f3f3f3;
  --surfaces-neutral-400: #ebedf2;
  --surfaces-tonal-100: #f3f2ff;
  --surfaces-tonal-200: #efeeff;
  --surfaces-tonal-700: #8982ff;
  --surfaces-tonal-800: #6c63ff;
  --surfaces-dashboard-main: #f3f2ff;

  /* Borders */
  --borders-white: #fafafa;
  --borders-neutral-300: #d5d7db;
  --borders-neutral-600: #a3a4ac;
  --borders-tonal-400: #dcdbff;
  --borders-tonal-700: #8a85fc;
  --borders-border-secondary: #6C63FF;
  --borders-border-secondary-dark: #563cf9;
  --borders-border-gray: #D5D7DB;
  --borders-border-gray-medium: #a3a4ac;
  --borders-border-white: #f6f7fb;
  --borders-border-tonal: #dcdbff;
  --borders-border-success: #62cfa7;

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-small: 6px;

  /* Spacing & Padding */
  --spacing-none: 0;
  --spacing-xxxs: 4px;
  --spacing-xxs: 8px;
  --spacing-s: 16px;

  /* Typography - Font Family */
  --types-family-font: "Montserrat", sans-serif;
  --types-brand-font: "Familjen Grotesk", sans-serif;
  --types-display-font: "Syne", sans-serif;

  /* Typography - Font Sizes */
  --types-font-size-12: 12px;
  --types-font-size-16: 16px;
  --types-font-size-18: 18px;
  --types-font-size-21: 21px;
  --types-font-size-24: 24px;
  --types-font-size-32: 32px;
  --types-font-size-36: 36px;
  --types-font-size-40: 40px;
  --types-font-size-48: 48px;

  /* Typography - Font Weights */
  --types-font-weight-regular: 400;
  --types-font-weight-medium: 500;
  --types-font-weight-semibold: 600;
  --types-font-weight-bold: 700;
  --types-font-weight-extrabold: 800;

  /* Typography - Text Styles */
  /* H1 */
  --h1-bold-font-family: var(--types-display-font);
  --h1-bold-font-size: var(--types-font-size-48);
  --h1-bold-font-weight: var(--types-font-weight-bold);
  --h1-bold-line-height: 1.2;
  --h1-bold-letter-spacing: 0.46px;

  /* H2 */
  --h2-bold-font-family: var(--types-display-font);
  --h2-bold-font-size: var(--types-font-size-40);
  --h2-bold-font-weight: var(--types-font-weight-bold);
  --h2-bold-line-height: 1.2;
  --h2-bold-letter-spacing: 1.46px;

  --h2-extrabold-font-family: var(--types-display-font);
  --h2-extrabold-font-size: var(--types-font-size-40);
  --h2-extrabold-font-weight: var(--types-font-weight-extrabold);
  --h2-extrabold-line-height: 1.2;
  --h2-extrabold-letter-spacing: 1.46px;

  /* H3 */
  --h3-font-family: var(--types-display-font);
  --h3-font-size: var(--types-font-size-32);
  --h3-font-weight: var(--types-font-weight-bold);
  --h3-line-height: 44px;
  --h3-letter-spacing: 0.46px;

  /* H4 */
  --h4-font-family: var(--types-family-font);
  --h4-font-size: var(--types-font-size-21);
  --h4-font-weight: 600;
  --h4-line-height: 1.2;
  --h4-letter-spacing: 0.46px;

  /* H5 */
  --h5-font-family: var(--types-family-font);
  --h5-font-size: var(--types-font-size-21);
  --h5-font-weight: var(--types-font-weight-bold);
  --h5-line-height: 1.2;
  --h5-letter-spacing: 0.46px;

  /* Body 1 */
  --body-1-regular-font-family: var(--types-family-font);
  --body-1-regular-font-size: var(--types-font-size-21);
  --body-1-regular-font-weight: var(--types-font-weight-regular);
  --body-1-regular-line-height: 1.55;
  --body-1-regular-letter-spacing: 0.46px;

  --body-1-medium-font-family: var(--types-family-font);
  --body-1-medium-font-size: var(--types-font-size-21);
  --body-1-medium-font-weight: var(--types-font-weight-medium);
  --body-1-medium-line-height: 1.5;
  --body-1-medium-letter-spacing: 0.46px;

  /* Body 2 */
  --body-2-medium-font-family: var(--types-family-font);
  --body-2-medium-font-size: var(--types-font-size-18);
  --body-2-medium-font-weight: var(--types-font-weight-medium);
  --body-2-medium-line-height: 1.5;
  --body-2-medium-letter-spacing: 0.46px;

  /* Body 3 */
  --body-3-semibold-font-family: var(--types-family-font);
  --body-3-semibold-font-size: var(--types-font-size-16);
  --body-3-semibold-font-weight: var(--types-font-weight-semibold);
  --body-3-semibold-line-height: 1.5;
  --body-3-semibold-letter-spacing: 0.46px;

  /* Button */
  --button-default-font-family: var(--types-family-font);
  --button-default-font-size: var(--types-font-size-16);
  --button-default-font-weight: var(--types-font-weight-semibold);
  --button-default-line-height: 100%;
  --button-default-letter-spacing: 0.46px;

  --button-large-font-family: var(--types-family-font);
  --button-large-font-size: var(--types-font-size-24);
  --button-large-font-weight: var(--types-font-weight-semibold);
  --button-large-line-height: 100%;
  --button-large-letter-spacing: 0.46px;

  /* Brand Tag */
  --brand-tag-font-family: var(--types-brand-font);
  --brand-tag-font-size: var(--types-font-size-16);
  --brand-tag-font-weight: var(--types-font-weight-medium);
  --brand-tag-line-height: 100%;
  --brand-tag-letter-spacing: 2px;

  /* Subtitle */
  --subtitle-font-family: var(--types-family-font);
  --subtitle-font-size: 24px;
  --subtitle-font-weight: var(--types-font-weight-semibold);
  --subtitle-line-height: 1.5;
  --subtitle-letter-spacing: 0.46px;

  /* Display */
  --display-font-family: var(--types-family-font);
  --display-font-size: var(--types-font-size-36);
  --display-font-weight: var(--types-font-weight-bold);
  --display-font-style: italic;
  --display-line-height: 1.2;
  --display-letter-spacing: 0.46px;

  /* Display 2 */
  --display-2-font-family: var(--types-family-font);
  --display-2-font-size: 60px;
  --display-2-font-weight: var(--types-font-weight-bold);
  --display-2-line-height: 100%;
  --display-2-letter-spacing: 0.46px;

  /* Caption */
  --caption-font-family: var(--types-family-font);
  --caption-font-size: var(--types-font-size-12);
  --caption-font-weight: var(--types-font-weight-regular);
  --caption-line-height: 1.2;
  --caption-letter-spacing: 0.46px;

  /* Shadows */
  --shadow-web: 
    1.065px 1.065px 52.128px 0px rgba(119, 114, 240, 0.12),
    0px 0px 36.489px 0px rgba(119, 114, 240, 0.12),
    0px 0px 5.213px 0px rgba(119, 114, 240, 0.1);

  --shadow-sg-1: 
    2px 2px 10px 0px rgba(13, 13, 13, 0.12),
    0px 0px 2px 0px rgba(13, 13, 13, 0.1),
    0px 0px 2px 0px rgba(13, 13, 13, 0.1);

  /* Component Colors */
  --component-colors-elements-primary-high-emphasis-light: #6c63ff;
  --component-colors-elements-primary-medium-emphasis-light: #dcdbff;
  --component-colors-elements-primary-low-emphasis-light: #f3f2ff;
  --component-colors-elements-primary-high-emphasis-lighter: #8982ff;
  --component-colors-elements-primary-medium-emphasis-main: #c5c2ff;
  --component-colors-elements-neutral-medium-emphasis-main: #96979f;
  --component-colors-elements-neutral-high-emphasis-dark: #2e2c2c;
  --component-colors-elements-neutral-white-dark: #ebedf2;
  --component-colors-borders-border-gray-medium: #a3a4ac;
  --component-colors-borders-border-white: #f6f7fb;
  --component-colors-borders-border-tonal: #dcdbff;
  --component-colors-borders-boder-secondary: #6C63FF;
  --component-colors-borders-boder-secondary-dark: #563cf9;
  --component-colors-text-icons-white: #f6f7fb;
  --component-colors-text-icons-accent-main: #6c63ff;
  --component-colors-cards-modals-special: #dcdbff;
  --component-colors-imputs-surface-disable: #ebedf2;
  --component-colors-general-surfaces-dashboard-main: #f3f2ff;
  --component-colors-tags-brand-fill-text-light: #5e17eb;
  --component-colors-tags-id-outline-surface-blue: #f2f4ff;
  --component-colors-tags-id-outline-surface-pink: #faf0ff;
  --component-colors-tags-id-outline-text-orange: #fc851b;
  --component-colors-tags-id-outline-surface-orange: #fffaf5;
  --logo-light-color: #ebedf2;
}

/* Responsive Typography - Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    /* Typography - Font Sizes (Tablet: ~85% of desktop) */
    --types-font-size-12: 12px;
    --types-font-size-16: 16px;
    --types-font-size-18: 18px;
    --types-font-size-21: 18px; /* 21px -> 18px */
    --types-font-size-24: 20px; /* 24px -> 20px */
    --types-font-size-32: 28px; /* 32px -> 28px */
    --types-font-size-36: 30px; /* 36px -> 30px */
    --types-font-size-40: 34px; /* 40px -> 34px */
    --types-font-size-48: 40px; /* 48px -> 40px */

    /* H1 */
    --h1-bold-font-size: 40px; /* 48px -> 40px */

    /* H2 */
    --h2-bold-font-size: 34px; /* 40px -> 34px */
    --h2-extrabold-font-size: 34px; /* 40px -> 34px */

    /* H3 */
    --h3-font-size: 28px; /* 32px -> 28px */
    --h3-line-height: 38px; /* 44px -> 38px */

    /* H4 */
    --h4-font-size: 18px; /* 21px -> 18px */

    /* H5 */
    --h5-font-size: 18px; /* 21px -> 18px */

    /* Body 1 */
    --body-1-regular-font-size: 18px; /* 21px -> 18px */
    --body-1-medium-font-size: 18px; /* 21px -> 18px */

    /* Body 2 */
    --body-2-medium-font-size: 16px; /* 18px -> 16px */

    /* Button */
    --button-large-font-size: 20px; /* 24px -> 20px */

    /* Subtitle */
    --subtitle-font-size: 20px; /* 24px -> 20px */

    /* Display */
    --display-font-size: 30px; /* 36px -> 30px */

    /* Display 2 */
    --display-2-font-size: 50px; /* 60px -> 50px */
  }
}

/* Responsive Typography - Mobile (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    /* Typography - Font Sizes (Mobile: ~70% of desktop) */
    --types-font-size-12: 12px;
    --types-font-size-16: 14px; /* 16px -> 14px */
    --types-font-size-18: 16px; /* 18px -> 16px */
    --types-font-size-21: 16px; /* 21px -> 16px */
    --types-font-size-24: 18px; /* 24px -> 18px */
    --types-font-size-32: 24px; /* 32px -> 24px */
    --types-font-size-36: 28px; /* 36px -> 28px */
    --types-font-size-40: 28px; /* 40px -> 28px */
    --types-font-size-48: 32px; /* 48px -> 32px */

    /* H1 */
    --h1-bold-font-size: 32px; /* 48px -> 32px */
    --h1-bold-line-height: 1.15;

    /* H2 */
    --h2-bold-font-size: 28px; /* 40px -> 28px */
    --h2-bold-line-height: 1.15;
    --h2-extrabold-font-size: 28px; /* 40px -> 28px */
    --h2-extrabold-line-height: 1.15;

    /* H3 */
    --h3-font-size: 24px; /* 32px -> 24px */
    --h3-line-height: 32px; /* 44px -> 32px */

    /* H4 */
    --h4-font-size: 18px; /* 21px -> 18px */

    /* H5 */
    --h5-font-size: 18px; /* 21px -> 18px */

    /* Body 1 */
    --body-1-regular-font-size: 16px; /* 21px -> 16px */
    --body-1-regular-line-height: 1.5;
    --body-1-medium-font-size: 16px; /* 21px -> 16px */
    --body-1-medium-line-height: 1.5;

    /* Body 2 */
    --body-2-medium-font-size: 14px; /* 18px -> 14px */

    /* Button */
    --button-default-font-size: 14px; /* 16px -> 14px */
    --button-large-font-size: 18px; /* 24px -> 18px */

    /* Brand Tag */
    --brand-tag-font-size: 14px; /* 16px -> 14px */

    /* Subtitle */
    --subtitle-font-size: 18px; /* 24px -> 18px */

    /* Display */
    --display-font-size: 28px; /* 36px -> 28px */

    /* Display 2 */
    --display-2-font-size: 40px; /* 60px -> 40px */
  }
}

/* Responsive Typography - Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  :root {
    /* Typography - Font Sizes (Small Mobile: ~60% of desktop) */
    --types-font-size-12: 11px;
    --types-font-size-16: 14px;
    --types-font-size-18: 15px;
    --types-font-size-21: 15px; /* 21px -> 15px */
    --types-font-size-24: 16px; /* 24px -> 16px */
    --types-font-size-32: 22px; /* 32px -> 22px */
    --types-font-size-36: 24px; /* 36px -> 24px */
    --types-font-size-40: 24px; /* 40px -> 24px */
    --types-font-size-48: 28px; /* 48px -> 28px */

    /* H1 */
    --h1-bold-font-size: 28px; /* 48px -> 28px */
    --h1-bold-line-height: 1.1;

    /* H2 */
    --h2-bold-font-size: 24px; /* 40px -> 24px */
    --h2-bold-line-height: 1.1;
    --h2-extrabold-font-size: 24px; /* 40px -> 24px */
    --h2-extrabold-line-height: 1.1;

    /* H3 */
    --h3-font-size: 22px; /* 32px -> 22px */
    --h3-line-height: 28px; /* 44px -> 28px */

    /* H4 */
    --h4-font-size: 16px; /* 21px -> 16px */

    /* H5 */
    --h5-font-size: 16px; /* 21px -> 16px */

    /* Body 1 */
    --body-1-regular-font-size: 15px; /* 21px -> 15px */
    --body-1-medium-font-size: 15px; /* 21px -> 15px */

    /* Body 2 */
    --body-2-medium-font-size: 14px; /* 18px -> 14px */

    /* Button */
    --button-default-font-size: 14px;
    --button-large-font-size: 16px; /* 24px -> 16px */

    /* Brand Tag */
    --brand-tag-font-size: 14px; /* 16px -> 14px */

    /* Subtitle */
    --subtitle-font-size: 16px; /* 24px -> 16px */

    /* Display */
    --display-font-size: 24px; /* 36px -> 24px */

    /* Display 2 */
    --display-2-font-size: 32px; /* 60px -> 32px */
  }
}