:root {
    --e-global-color-primary: #05302C;
    --e-global-color-secondary: #A4C8E1;
    --e-global-color-text: #000000;
    --e-global-color-accent: #124DC4;
    --global-color-gray-0: #FFFFFF;
    --global-color-gray-50: #F9FAFB;
    --global-color-gray-100: #F3F4F6;
    --global-color-gray-200: #E5E7EB;
    --global-color-gray-300: #D1D5DB;
    --global-color-gray-400: #9CA3AF;
    --global-color-gray-500: #6B7280;
    --global-color-gray-600: #4B5563;
    --global-color-gray-700: #374151;
    --global-color-gray-800: #1F2937;
    --global-color-gray-900: #111827;
    --global-color-gray-950: #030712;
    --global-color-green-50: #F0F4F1;
    --global-color-green-100: #E2E9E3;
    --global-color-green-200: #D2E0D5;
    --global-color-green-300: #B9CBC0;
    --global-color-green-400: #97AEA3;
    --global-color-green-500: #7E998F;
    --global-color-green-600: #66847B;
    --global-color-green-700: #4E6F68;
    --global-color-green-800: #365A54;
    --global-color-green-900: #1D4540;
    --global-color-green-950: #05302C;
    --global-color-blue-50: #E5EFF5;
    --global-color-blue-100: #C8DCEA;
    --global-color-blue-200: #A4C8E1;
    --global-color-blue-300: #8CB6D4;
    --global-color-blue-400: #6E9CD0;
    --global-color-blue-500: #4F82CC;
    --global-color-blue-600: #3167C8;
    --global-color-blue-700: #124DC4;
    --global-color-blue-800: #0F3E9F;
    --global-color-blue-900: #0C3383;
    --global-color-blue-950: #09255D;

  /* Typography Variables */
  --font-family-base: sans-serif;

  /* Font Family Variables */
  --font-family-display: sentient, georgia, serif;
  --font-family-heading: satoshi, helvetica, sans-serif;
  --font-family-body: satoshi, helvetica, sans-serif;

  /* Display Sizes */
  --display-2xl-size: clamp(3rem, 3.478vw + 2.217rem, 5rem);
  --display-2xl-line: clamp(3.3rem, 3.826vw + 2.439rem, 5.5rem);
  --display-2xl-weight: 200;
  --display-2xl-spacing: -0.01em;

  --display-xl-size: clamp(2.75rem, 2.174vw + 2.261rem, 4rem);
  --display-xl-line: clamp(3.3rem, 2.609vw + 2.713rem, 4.8rem);
  --display-xl-weight: 200;
  --display-xl-spacing: -0.01em;

  --display-lg-size: clamp(2.25rem, 1.739vw + 1.859rem, 3.25rem);
  --display-lg-line: clamp(2.7rem, 2.087vw + 2.23rem, 3.9rem);
  --display-lg-weight: 200;
  --display-lg-spacing: -0.01em;

  --display-md-size: clamp(2rem, 1.304vw + 1.707rem, 2.75rem);
  --display-md-line: clamp(2.4rem, 1.565vw + 2.048rem, 3.3rem);
  --display-md-weight: 200;
  --display-md-spacing: -0.01em;

  --display-sm-size: clamp(1.75rem, 0.978vw + 1.53rem, 2.313rem);
  --display-sm-line: clamp(2.1rem, 1.174vw + 1.836rem, 2.775rem);
  --display-sm-weight: 200;
  --display-sm-spacing: -0.01em;

  --display-xs-size: clamp(1.625rem, 0.652vw + 1.478rem, 2rem);
  --display-xs-line: clamp(1.95rem, 0.783vw + 1.774rem, 2.4rem);
  --display-xs-weight: 200;
  --display-xs-spacing: -0.01em;

  /* Heading Sizes */
  --heading-2xl-size: clamp(1.625rem, 0.87vw + 1.429rem, 2.125rem);
  --heading-2xl-line: clamp(1.95rem, 1.043vw + 1.715rem, 2.55rem);
  --heading-2xl-weight: 500;
  --heading-2xl-spacing: -0.005em;

  --heading-xl-size: clamp(1.375rem, 0.652vw + 1.228rem, 1.75rem);
  --heading-xl-line: clamp(1.65rem, 0.783vw + 1.474rem, 2.1rem);
  --heading-xl-weight: 500;
  --heading-xl-spacing: -0.005em;

  --heading-lg-size: clamp(1.125rem, 0.652vw + 0.978rem, 1.5rem);
  --heading-lg-line: clamp(1.35rem, 0.783vw + 1.174rem, 1.8rem);
  --heading-lg-weight: 500;
  --heading-lg-spacing: -0.005em;

  --heading-md-size: clamp(0.875rem, 0.217vw + 0.826rem, 1rem);
  --heading-md-line: clamp(1.225rem, 0.304vw + 1.157rem, 1.4rem);
  --heading-md-weight: 500;
  --heading-md-spacing: -0.005em;
  --heading-md-transform: uppercase;

  --heading-sm-size: clamp(0.75rem, 0.217vw + 0.701rem, 0.875rem);
  --heading-sm-line: clamp(1.05rem, 0.304vw + 0.982rem, 1.225rem);
  --heading-sm-weight: 500;
  --heading-sm-spacing: -0.005em;
  --heading-sm-transform: uppercase;

  --heading-xs-size: clamp(0.75rem, 0.217vw + 0.701rem, 0.875rem);
  --heading-xs-line: clamp(1.05rem, 0.304vw + 0.982rem, 1.225rem);
  --heading-xs-weight: 500;
  --heading-xs-spacing: -0.005em;
  --heading-xs-transform: uppercase;

  /* Body Sizes */
  --body-size: clamp(1rem, 0.217vw + 0.951rem, 1.125rem);
  --body-line: clamp(1.6rem, 0.348vw + 1.522rem, 1.8rem);
  --body-weight: 400;

  --body-lg-size: clamp(1.125rem, 0.435vw + 1.027rem, 1.375rem);
  --body-lg-line: clamp(1.688rem, 0.652vw + 1.541rem, 2.063rem);
  --body-lg-weight: 400;

  --body-sm-size: clamp(0.875rem, 0.217vw + 0.826rem, 1rem);
  --body-sm-line: clamp(1.313rem, 0.326vw + 1.239rem, 1.5rem);
  --body-sm-weight: 400;

  /* Button Text Variables */
  --button-font-family: var(--font-family-body);
  --button-font-size: var(--body-size);
  --button-line-height: var(--body-line);
  --button-font-weight: 500;
}

/* Color Classes */

.bg-primary {
    background-color: var(--e-global-color-primary);
}

.bg-secondary {
    background-color: var(--e-global-color-secondary);
}

.bg-text {
    background-color: var(--e-global-color-text);
}

.bg-accent {
    background-color: var(--e-global-color-accent);
}

.bg-gray-0 {
    background-color: var(--global-color-gray-0);
}

.bg-gray-50 {
    background-color: var(--global-color-gray-50);
}

.bg-gray-100 {
    background-color: var(--global-color-gray-100);
}

.bg-gray-200 {
    background-color: var(--global-color-gray-200);
}

.bg-gray-300 {
    background-color: var(--global-color-gray-300);
}

.bg-gray-400 {
    background-color: var(--global-color-gray-400);
}

.bg-gray-500 {
    background-color: var(--global-color-gray-500);
}

.bg-gray-600 {
    background-color: var(--global-color-gray-600);
}

.bg-gray-700 {
    background-color: var(--global-color-gray-700);
}

.bg-gray-800 {
    background-color: var(--global-color-gray-800);
}

.bg-gray-900 {
    background-color: var(--global-color-gray-900);
}

.bg-gray-950 {
    background-color: var(--global-color-gray-950);
}

.bg-green-50 {
    background-color: var(--global-color-green-50);
}

.bg-green-100 {
    background-color: var(--global-color-green-100);
}

.bg-green-200 {
    background-color: var(--global-color-green-200);
}

.bg-green-300 {
    background-color: var(--global-color-green-300);
}

.bg-green-400 {
    background-color: var(--global-color-green-400);
}

.bg-green-500 {
    background-color: var(--global-color-green-500);
}

.bg-green-600 {
    background-color: var(--global-color-green-600);
}

.bg-green-700 {
    background-color: var(--global-color-green-700);
}

.bg-green-800 {
    background-color: var(--global-color-green-800);
}

.bg-green-900 {
    background-color: var(--global-color-green-900);
}

.bg-green-950 {
    background-color: var(--global-color-green-950);
}

.bg-blue-50 {
    background-color: var(--global-color-blue-50);
}

.bg-blue-100 {
    background-color: var(--global-color-blue-100);
}

.bg-blue-200 {
    background-color: var(--global-color-blue-200);
}

.bg-blue-300 {
    background-color: var(--global-color-blue-300);
}

.bg-blue-400 {
    background-color: var(--global-color-blue-400);
}

.bg-blue-500 {
    background-color: var(--global-color-blue-500);
}

.bg-blue-600 {
    background-color: var(--global-color-blue-600);
}

.bg-blue-700 {
    background-color: var(--global-color-blue-700);
}

.bg-blue-800 {
    background-color: var(--global-color-blue-800);
}

.bg-blue-900 {
    background-color: var(--global-color-blue-900);
}

.bg-blue-950 {
    background-color: var(--global-color-blue-950);
}

/* Base Typography Classes */

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

/* Display xl */
.display-xl {
  font-family: var(--font-family-display);
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-line);
  font-weight: var(--display-xl-weight);
  letter-spacing: var(--display-xl-spacing);
}

/* Display lg */
.display-lg {
  font-family: var(--font-family-display);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line);
  font-weight: var(--display-lg-weight);
  letter-spacing: var(--display-lg-spacing);
}

/* Display md */
.display-md {
  font-family: var(--font-family-display);
  font-size: var(--display-md-size);
  line-height: var(--display-md-line);
  font-weight: var(--display-md-weight);
  letter-spacing: var(--display-md-spacing);
}

/* Display sm */
.display-sm {
  font-family: var(--font-family-display);
  font-size: var(--display-sm-size);
  line-height: var(--display-sm-line);
  font-weight: var(--display-sm-weight);
  letter-spacing: var(--display-sm-spacing);
}

/* Display xs */
.display-xs {
  font-family: var(--font-family-display);
  font-size: var(--display-xs-size);
  line-height: var(--display-xs-line);
  font-weight: var(--display-xs-weight);
  letter-spacing: var(--display-xs-spacing);
}

/* Headings using semantic sizes: 2xl, xl, lg, md, sm, xs */

/* Heading 2xl */
.heading-2xl {
  font-family: var(--font-family-heading);
  font-size: var(--heading-2xl-size);
  line-height: var(--heading-2xl-line);
  font-weight: var(--heading-2xl-weight);
  letter-spacing: var(--heading-2xl-spacing);
}

/* Heading xl */
.heading-xl {
  font-family: var(--font-family-heading);
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line);
  font-weight: var(--heading-xl-weight);
  letter-spacing: var(--heading-xl-spacing);
}

/* Heading lg */
.heading-lg {
  font-family: var(--font-family-heading);
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line);
  font-weight: var(--heading-lg-weight);
  letter-spacing: var(--heading-lg-spacing);
}

/* Heading md */
.heading-md {
  font-family: var(--font-family-heading);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  font-weight: var(--heading-md-weight);
  letter-spacing: var(--heading-md-spacing);
  text-transform: var(--heading-md-transform);
}

/* Heading sm */
.heading-sm {
  font-family: var(--font-family-heading);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line);
  font-weight: var(--heading-sm-weight);
  letter-spacing: var(--heading-sm-spacing);
  text-transform: var(--heading-sm-transform);
}

/* Heading xs */
.heading-xs {
  font-family: var(--font-family-heading);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line);
  font-weight: var(--heading-xs-weight);
  letter-spacing: var(--heading-xs-spacing);
  text-transform: var(--heading-xs-transform);
}

/* Body Text */
.body {
  font-family: var(--font-family-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
}

.body-lg {
  font-family: var(--font-family-body);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: var(--body-lg-weight);
}

.body-sm {
  font-family: var(--font-family-body);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: var(--body-sm-weight);
}

.button-text {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight);
}

/* Button Hover State Classes */

/* Color Change Hover State */
.btn-hover-color-change {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Lift Effect Hover State */
.btn-hover-lift-effect {
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-hover-lift-effect:hover,
.btn-hover-lift-effect:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.btn-hover-lift-effect:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Text Button Exception - No Hover Effects */
.btn-text.btn-hover-lift-effect,
.btn-text.btn-hover-color-change {
  transition: none !important;
  box-shadow: none !important;
}

.btn-text.btn-hover-lift-effect:hover,
.btn-text.btn-hover-lift-effect:focus,
.btn-text.btn-hover-lift-effect:active,
.btn-text.btn-hover-color-change:hover,
.btn-text.btn-hover-color-change:focus,
.btn-text.btn-hover-color-change:active {
  transform: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}