:root {

    /*============== Typography ==============*/
    --base-font-size-mobile: 14px;
    --base-font-size-desktop: 16px;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-default: 0;
    --letter-spacing-display: -0.02em;
    --letter-spacing-label: 0.01em;
    --letter-spacing-label-md: 0.063em;

    --line-height-display: 95%;
    --line-height-display-sm: 120%;
    --line-height-heading: 120%;
    --line-height-body: 150%;
    --line-height-caption: 120%;
    --line-height-label: 120%;

    --font-size-display-xl: 6rem;
    --font-size-display-lg: 4rem;
    --font-size-display-md: 3rem;
    --font-size-display-sm: 2.25rem;
    --font-size-display-xs: 2rem;
    --font-size-display-xxs: 1.5rem;

    --font-size-heading-xl: 3rem;
    --font-size-heading-lg: 2.5rem;
    --font-size-heading-md: 1.5rem;
    --font-size-heading-sm: 1.25rem;

    --font-size-body-lg: 1.25rem;
    --font-size-body-md: 1rem;
    --font-size-body-sm: 0.875rem;
    --font-size-body-xs: 0.75rem;

    --font-size-caption-lg: 0.875rem;
    --font-size-caption-sm: 0.75rem;

    --font-size-label-md: 1rem;

    /* Gray Variants */
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F2F4F8;
    --color-gray-200: #F8F8F8;
    --color-gray-700: #485A6A;
    --color-gray-800: #3B3B3B;

    /* Blue Variants */
    --color-blue-50: #F5F5F5; 
    --color-blue-100: #0060CD;
    --color-blue-200: #DBE5F0;
    --color-blue-600: #21293B;
    --color-blue-700: #2F3B57;

    --font-main: 'Inter', sans-serif;
    --font-display: 'Poppins', sans-serif;

    --font-weight-semibold-expanded: 500;
    --font-weight-bold-expanded: 700;
    --font-weight-extrabold-expanded: 800;

    /*---text display---*/
    --text-display-xl: var(--font-size-display-xl);
    --text-display-xl--font-weight: var(--font-weight-extrabold-expanded);
    --text-display-xl--line-height: var(--line-height-display);
    --text-display-xl--letter-spacing: var(--letter-spacing-display);

    --text-display-lg: var(--font-size-display-lg);
    --text-display-lg--font-weight: var(--font-weight-bold-expanded);
    --text-display-lg--line-height: var(--line-height-display);
    --text-display-lg--letter-spacing: var(--letter-spacing-display);

    --text-display-md: var(--font-size-display-md);
    --text-display-md--font-weight: var(--font-weight-bold-expanded);
    --text-display-md--line-height: var(--line-height-display);
    --text-display-md--letter-spacing: var(--letter-spacing-display);

    --text-display-sm: var(--font-size-display-sm);
    --text-display-sm--font-weight: var(--font-weight-bold-expanded);
    --text-display-sm--line-height: var(--line-height-display);
    --text-display-sm--letter-spacing: var(--letter-spacing-display);

    --text-display-xs: var(--font-size-display-xs);
    --text-display-xs--font-weight: var(--font-weight-bold-expanded);
    --text-display-xs--line-height: var(--line-height-display-sm);
    --text-display-xs--letter-spacing: var(--letter-spacing-display);

    --text-display-xxs: var(--font-size-display-xxs);
    --text-display-xxs--font-weight: var(--font-weight-extrabold-expanded);
    --text-display-xxs--line-height: var(--line-height-display-sm);
    --text-display-xxs--letter-spacing: var(--letter-spacing-display);

    /*---text heading---*/
    --text-heading-xl: var(--font-size-heading-xl);
    --text-heading-xl--font-weight: var(--font-weight-bold);
    --text-heading-xl--line-height: var(--line-height-heading);
    --text-heading-xl--letter-spacing: var(--letter-spacing-default);

    --text-heading-lg: var(--font-size-heading-lg);
    --text-heading-lg--font-weight: var(--font-weight-bold);
    --text-heading-lg--line-height: var(--line-height-heading);
    --text-heading-lg--letter-spacing: var(--letter-spacing-default);

    --text-heading-md: var(--font-size-heading-md);
    --text-heading-md--font-weight: var(--font-weight-bold);
    --text-heading-md--line-height: var(--line-height-heading);
    --text-heading-md--letter-spacing: var(--letter-spacing-default);

    --text-heading-sm: var(--font-size-heading-sm);
    --text-heading-sm--font-weight: var(--font-weight-bold);
    --text-heading-sm--line-height: var(--line-height-heading);
    --text-heading-sm--letter-spacing: var(--letter-spacing-default);

    /*---text body---*/
    --text-body-lg: var(--font-size-body-lg);
    --text-body-lg--font-weight: var(--font-weight-regular);
    --text-body-lg--line-height: var(--line-height-body);
    --text-body-lg--letter-spacing: var(--letter-spacing-default);

    --text-body-md: var(--font-size-body-md);
    --text-body-md--font-weight: var(--font-weight-regular);
    --text-body-md--line-height: var(--line-height-body);
    --text-body-md--letter-spacing: var(--letter-spacing-default);

    --text-body-sm: var(--font-size-body-sm);
    --text-body-sm--font-weight: var(--font-weight-regular);
    --text-body-sm--line-height: var(--line-height-body);
    --text-body-sm--letter-spacing: var(--letter-spacing-default);

    /*---text caption---*/
    --text-caption-lg: var(--font-size-caption-lg);
    --text-caption-lg--font-weight: var(--font-weight-bold);
    --text-caption-lg--line-height: var(--line-height-caption);
    --text-caption-lg--letter-spacing: var(--letter-spacing-default);

    --text-caption-sm: var(--font-size-caption-sm);
    --text-caption-sm--font-weight: var(--font-weight-bold);
    --text-caption-sm--line-height: var(--line-height-caption);
    --text-caption-sm--letter-spacing: var(--letter-spacing-default);

    /*---text label---*/
    --text-label-md: var(--font-size-label-md);
    --text-label-md--font-weight: var(--font-weight-bold);
    --text-label-md--line-height: var(--line-height-label);
    --text-label-md--letter-spacing: var(--letter-spacing-default);

 }

 html {
  font-size: clamp(var(--base-font-size-mobile), 2vw, var(--base-font-size-desktop));
 }

.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-extrabold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-lg {
  font-size:  var(--font-size-display-lg);
  font-weight: var(--font-weight-bold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-md {
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-bold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-sm {
 font-family: var(--font-display);
 font-size: var(--font-size-display-sm);
 font-weight: var(--font-weight-bold-expanded);
 line-height: var(--line-height-display);
 letter-spacing: var(--letter-spacing-display);
}

.text-display-xs {
 font-size: var(--font-size-display-xs);
 font-weight: var(--font-weight-bold-expanded);
 line-height: var(--line-height-display-sm);
 letter-spacing: var(--letter-spacing-display);
}

.text-display-xxs {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xxs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display);
}

.text-heading-xl {
 font-size: var(--font-size-heading-xl);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-lg {
 font-family: var(--font-display);
 font-size: var(--font-size-heading-lg);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-md {
 font-family: var(--font-display);
 font-size: var(--font-size-heading-md);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-sm {
 font-family: var(--font-display);
 font-size: var(--font-size-heading-sm);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-lg {
 font-family: var(--font-main);
 font-size: var(--font-size-body-lg);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-md {
 font-family: var(--font-main);
 font-size: var(--font-size-body-md);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-sm {
 font-family: var(--font-main);
 font-size: var(--font-size-body-sm);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-xs {
 font-family: var(--font-main);
 font-size: var(--font-size-body-xs);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}


/*---text caption---*/
.text-caption-lg {
 font-size: var(--font-size-caption-lg);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-caption);
 letter-spacing: var(--letter-spacing-default);
}

.text-caption-sm {
 font-size: var(--font-size-caption-sm);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-caption);
 letter-spacing: var(--letter-spacing-default);
}

 /*---text label---*/
.text-label-md {
 font-family: var(--font-main);
 font-size: var(--font-size-label-md);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-label);
 letter-spacing: var(--letter-spacing-label-md);
}

.title-primary {
 color: var(--color-blue-600);
}

.text-primary {
 color: var(--color-gray-800) !important;
}

.text-link {
 color: var(--color-blue-100);
}

.surface-container-low {
 background-color: var(--color-gray-50);
}

.surface-variant {
 background-color: var(--color-blue-50);
}

.news-card-content {
 font-family: var(--font-display);
}