:root {
  --main_font: "Inter", sans-serif;

  --h_title: #242729;
  --p_color: #3c4146;
  --black_25: #f9f9f9;
  --black_50: #ebebeb;
  --black_75: #e6e6e6;
  --black_100: #d6d9dc;
  --black_150: #c8ccd0;
  --black_200: #bbc0c4;
  --black_300: #9fa6ad;
  --black_350: #9199a1;
  --black_400: #848d95;
  --black_500: #6a737c;
  --black_600: #535a60;
  --black_700: #3c4146;
  --black_750: #2f3337;
  --black_800: #242729;
  --black_900: #0c0d0e;
  --brand_color: #f4196d;
  /* RGB tuple for brand color to allow alpha utilities without Sass color funcs */
  --brand_color_rgb: 244, 25, 109;
  --brand_color_900: #f23479;
  --brand_color_800: #f74685;
  --brand_color_700: #fa5891;
  --brand_color_600: #fd6b9d;
  --brand_color_500: #ff7ea9;
  --brand_color_400: #ff90b5;
  --brand_color_300: #ffa3c1;
  --brand_color_200: #ffb5cd;
  --brand_color_100: #ffc8d9;
  --brand_color_75: #ffdbe5;
  --brand_color_50: #ffeef1;
  --brand_color_25: #fff1f4;
  --brand_hover: #d1054d;
  --secondery_color: #0fe493;
  --shadow_1: 0px 70px 100px rgba(25, 4, 99, 0.13);
  --long_shadow: 0 20px 45px rgba(51, 77, 114, 0.15);
  --subtle_shadow: 0 0.5px 1px rgba(51, 77, 114, 0.1),
    0 1.6px 3.6px rgba(51, 77, 114, 0.15);
  --bs_sm: 0 1px 2px rgb(0 0 0 / 5%), 0 1px 4px rgb(0 0 0 / 5%), 0 2px 8px rgb(0 0 0 / 5%);
  --bs_md: 0 1px 3px rgb(0 0 0 / 6%), 0 2px 6px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 0 0 / 9%);
  --bs_lg: 0 1px 4px rgb(0 0 0 / 9%), 0 3px 8px rgb(0 0 0 / 9%), 0 4px 13px rgb(0 0 0 / 13%);

  // Spacing variables
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  // Border radius
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  // Transitions
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  // Typography
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  // Z-index layers
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  // Glassmorphism
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.75);
  --glass-border: 1px solid rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --glass-blur: blur(16px);
  --glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);

  // Modern Gradients
  --gradient-primary: linear-gradient(135deg, #f4196d 0%, #ff90b5 100%);
  --gradient-bg: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --gradient-mesh: radial-gradient(at 0% 0%, hsla(337, 84%, 61%, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(196, 79%, 65%, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(337, 84%, 61%, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(196, 79%, 65%, 0.1) 0px, transparent 50%);
}

/*font Variables*/
$main_font: var(--main_font);

$h_title: var(--h_title);
$p_color: var(--p_color);
$black_25: var(--black_25);
$black_50: var(--black_50);
$black_75: var(--black_75);
$black_100: var(--black_100);
$black_150: var(--black_150);
$black_200: var(--black_200);
$black_300: var(--black_300);
$black_350: var(--black_350);
$black_400: var(--black_400);
$black_500: var(--black_500);
$black_600: var(--black_600);
$black_700: var(--black_700);
$black_750: var(--black_750);
$black_800: var(--black_800);
$black_900: var(--black_900);
$brand_color: var(--brand_color);
$brand_color_rgb: var(--brand_color_rgb);
$brand_color_900: var(--brand_color_900);
$brand_color_800: var(--brand_color_800);
$brand_color_700: var(--brand_color_700);
$brand_color_600: var(--brand_color_600);
$brand_color_500: var(--brand_color_500);
$brand_color_400: var(--brand_color_400);
$brand_color_300: var(--brand_color_300);
$brand_color_200: var(--brand_color_200);
$brand_color_100: var(--brand_color_100);
$brand_color_75: var(--brand_color_75);
$brand_color_50: var(--brand_color_50);
$brand_hover: var(--brand_hover);
$secondery_color: var(--secondery_color);
$shadow_1: var(--shadow_1);
$long_shadow: var(--long_shadow);
$subtle_shadow: var(--subtle_shadow);
$transition: all 0.3s ease-in-out;

/** === Box Shadow ==== **/
.bs-sm {
  box-shadow: var(--bs_sm) !important;
}

.bs-md {
  box-shadow: var(--bs_md) !important;
}

.bs-lg {
  box-shadow: var(--bs_lg) !important;
}

/** Hover Classes **/
.h\:bs-md:hover {
  box-shadow: var(--bs_md) !important;
}

.h\:bs-lg:hover {
  box-shadow: var(--bs_md) !important;
}