@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

.font-inter {
  font-family: "Inter", sans-serif;
}

body {
  font-family: "Inter", sans-serif;
}

body #overlay {
  display: none;
}

body.overlay-visible {
  overflow: hidden;
}

body.overlay-visible #overlay {
  display: block;
}

button:not(:disabled) {
  cursor: pointer;
}

.bg-blur {
  background: rgba(2, 6, 23, 0.25);

  backdrop-filter: blur(5px);
}

.d-none {
  display: none;
}

:root {
  /* Base */

  /* Background */
  --color-background-background: #ffffff;
  --color-background-90: rgba(255, 255, 255, 0.9);
  --color-background-80: rgba(255, 255, 255, 0.8);
  --color-background-70: rgba(255, 255, 255, 0.7);
  --color-background-60: rgba(255, 255, 255, 0.6);
  --color-background-50: rgba(255, 255, 255, 0.5);
  --color-background-40: rgba(255, 255, 255, 0.4);
  --color-background-30: rgba(255, 255, 255, 0.3);
  --color-background-20: rgba(255, 255, 255, 0.2);
  --color-background-10: rgba(255, 255, 255, 0.1);
  --color-background-5: rgba(255, 255, 255, 0.05);
  --color-neutral-just-white: #ffffff;
  --color-neutral-Background: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;
  --color-primary-50: #edf2ff;
  --color-primary-100: #dee9ff;
  --color-primary-200: #c4d5ff;
  --color-primary-300: #a0b9ff;
  --color-primary-400: #8b9fff;
  --color-primary-500: #5b6bf9;
  --color-primary-600: #3d41ee;
  --color-primary-700: #2f2fd3;
  --color-primary-800: #292baa;
  --color-primary-900: #292d86;
  --color-primary-950: #18184e;
  --color-secondary-50: #fdfee7;
  --color-secondary-100: #f8fccb;
  --color-secondary-200: #f0f99d;
  --color-secondary-300: #e1f264;
  --color-secondary-400: #c9e31f;
  --color-secondary-500: #b1cc16;
  --color-secondary-600: #8aa30d;
  --color-secondary-700: #687c0f;
  --color-secondary-800: #536212;
  --color-secondary-900: #455314;
  --color-secondary-950: #242e05;
  --color-success-50: #f0fdf5;
  --color-success-100: #dcfce8;
  --color-success-200: #bbf7d1;
  --color-success-300: #86efad;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803c;
  --color-success-800: #166533;
  --color-success-900: #14532b;
  --color-success-950: #052e14;
  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-300: #7dd3fc;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;
  --color-info-950: #082f49;
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;
  --color-danger-950: #450a0a;
  --color-warning-50: #fefce8;
  --color-warning-100: #fef9c3;
  --color-warning-200: #fef08a;
  --color-warning-300: #fde047;
  --color-warning-400: #facc15;
  --color-warning-500: #eab308;
  --color-warning-600: #ca8a04;
  --color-warning-700: #a16207;
  --color-warning-800: #854d0e;
  --color-warning-900: #713f12;
  --color-warning-950: #422006;
  --color-green-50: #f1fcf4;
  --color-green-100: #dff9e6;
  --color-green-200: #bdf2cc;
  --color-green-300: #91e4a9;
  --color-green-400: #59cf7c;
  --color-green-500: #35bb5d;
  --color-green-600: #259446;
  --color-green-700: #20753a;
  --color-green-800: #1e5d32;
  --color-green-900: #1b4c2b;
  --color-green-950: #092a15;
  --color-orange-50: #fff8ed;
  --color-orange-100: #fff0d4;
  --color-orange-200: #ffdea8;
  --color-orange-300: #ffc570;
  --color-orange-400: #ffa037;
  --color-orange-500: #ff8614;
  --color-orange-600: #f06806;
  --color-orange-700: #c74d07;
  --color-orange-800: #9e3d0e;
  --color-orange-900: #7f340f;
  --color-orange-950: #451805;
  --color-green-600: #259446;
  --color-green-700: #20753a;
  --color-green-800: #1e5d32;
  --color-green-900: #1b4c2b;
  --color-green-950: #092a15;

  /* Orange */
  --color-orange-50: #fff8ed;
  --color-orange-100: #fff0d4;
  --color-orange-200: #ffdea8;
  --color-orange-300: #ffc570;
  --color-orange-400: #ffa037;
  --color-orange-500: #ff8614;
  --color-orange-600: #f06806;
  --color-orange-700: #c74d07;
  --color-orange-800: #9e3d0e;
  --color-orange-900: #7f340f;
  --color-orange-950: #451805;

  /* Text Colors */
  --text-strong: var(--color-neutral-950);
  --text-medium: var(--color-neutral-700);
  --text-low: var(--color-neutral-500);
  --text-disable: var(--color-neutral-300);
  --text-primary: var(--color-primary-500);
  --text-error: var(--color-danger-500);
  --text-success: var(--color-green-500);
  --text-info: var(--color-info-500);
  --text-warning: var(--color-warning-500);
  --text-link: #306aff;

  /* Alert Component Colors */
  --alert-title: var(--color-neutral-Background);
  --alert-desc: var(--color-neutral-Background);
  --alert-icon: var(--color-neutral-Background);
  --alert-close-icon: var(--color-neutral-700);

  /* Checkbox Component Colors */
  --checkbox-check: var(--color-neutral-Background);
  --checkbox-check-disable: var(--color-neutral-Background);
  --checkbox-default-border: var(--color-neutral-300);
  --checkbox-default-selected: var(--color-primary-500);
  --checkbox-hover: var(--color-primary-600);
  --checkbox-hover-selected: var(--color-primary-600);
  --checkbox-disable-border: var(--color-neutral-200);
  --checkbox-disable: var(--color-neutral-200);

  /* Radio Component Colors */
  --radio-check: var(--color-neutral-Background);
  --radio-check-disable: var(--color-neutral-Background);
  --radio-default-border: var(--color-neutral-300);
  --radio-default-selected: var(--color-primary-500);
  --radio-hover: var(--color-primary-600);
  --radio-hover-selected: var(--color-primary-600);
  --radio-disable-border: var(--color-neutral-200);
  --radio-disable: var(--color-neutral-200);

  /* Card Component Colors */

  --card-background: var(--color-neutral-Background);
  --card-border: var(--color-neutral-200);
}

/* Custom Utility Classes (Tailwind-like) */
.bg-primary-500 {
  background-color: var(--color-primary-500);
}
.bg-warning-500 {
  background-color: var(--color-warning-500);
}
.bg-success-500 {
  background-color: var(--color-green-500);
}
.bg-info-500 {
  background-color: var(--color-info-500);
}
.bg-danger-500 {
  background-color: var(--color-danger-500);
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-neutral-950 {
  background-color: var(--color-neutral-950);
}
.bg-neutral-700 {
  background-color: var(--color-neutral-700);
}
.bg-neutral-500 {
  background-color: var(--color-neutral-500);
}
.bg-primary-900 {
  background-color: var(--color-primary-900);
}
.bg-primary-950 {
  background-color: var(--color-primary-950);
}
.bg-secondary-50 {
  background-color: var(--color-secondary-50);
}
.bg-secondary-100 {
  background-color: var(--color-secondary-100);
}
.bg-secondary-200 {
  background-color: var(--color-secondary-200);
}
.bg-secondary-300 {
  background-color: var(--color-secondary-300);
}
.bg-secondary-400 {
  background-color: var(--color-secondary-400);
}
.bg-secondary-500 {
  background-color: var(--color-secondary-500);
}
.bg-secondary-600 {
  background-color: var(--color-secondary-600);
}
.bg-secondary-700 {
  background-color: var(--color-secondary-700);
}
.bg-secondary-800 {
  background-color: var(--color-secondary-800);
}
.bg-secondary-900 {
  background-color: var(--color-secondary-900);
}
.bg-secondary-950 {
  background-color: var(--color-secondary-950);
}
.bg-success-50 {
  background-color: var(--color-success-50);
}
.bg-success-100 {
  background-color: var(--color-success-100);
}
.bg-success-200 {
  background-color: var(--color-success-200);
}
.bg-success-300 {
  background-color: var(--color-success-300);
}
.bg-success-400 {
  background-color: var(--color-success-400);
}
.bg-success-500 {
  background-color: var(--color-success-500);
}
.bg-success-600 {
  background-color: var(--color-success-600);
}
.bg-success-700 {
  background-color: var(--color-success-700);
}
.bg-success-800 {
  background-color: var(--color-success-800);
}
.bg-success-900 {
  background-color: var(--color-success-900);
}
.bg-success-950 {
  background-color: var(--color-success-950);
}
.bg-info-50 {
  background-color: var(--color-info-50);
}
.bg-info-100 {
  background-color: var(--color-info-100);
}
.bg-info-200 {
  background-color: var(--color-info-200);
}
.bg-info-300 {
  background-color: var(--color-info-300);
}
.bg-info-400 {
  background-color: var(--color-info-400);
}
.bg-info-500 {
  background-color: var(--color-info-500);
}
.bg-info-600 {
  background-color: var(--color-info-600);
}
.bg-info-700 {
  background-color: var(--color-info-700);
}
.bg-info-800 {
  background-color: var(--color-info-800);
}
.bg-info-900 {
  background-color: var(--color-info-900);
}
.bg-info-950 {
  background-color: var(--color-info-950);
}
.bg-danger-50 {
  background-color: var(--color-danger-50);
}
.bg-danger-100 {
  background-color: var(--color-danger-100);
}
.bg-danger-200 {
  background-color: var(--color-danger-200);
}
.bg-danger-300 {
  background-color: var(--color-danger-300);
}
.bg-danger-400 {
  background-color: var(--color-danger-400);
}
.bg-danger-500 {
  background-color: var(--color-danger-500);
}
.bg-danger-600 {
  background-color: var(--color-danger-600);
}
.bg-danger-700 {
  background-color: var(--color-danger-700);
}
.bg-danger-800 {
  background-color: var(--color-danger-800);
}
.bg-danger-900 {
  background-color: var(--color-danger-900);
}
.bg-danger-950 {
  background-color: var(--color-danger-950);
}
.bg-warning-50 {
  background-color: var(--color-warning-50);
}
.bg-warning-100 {
  background-color: var(--color-warning-100);
}
.bg-warning-200 {
  background-color: var(--color-warning-200);
}
.bg-warning-300 {
  background-color: var(--color-warning-300);
}
.bg-warning-400 {
  background-color: var(--color-warning-400);
}
.bg-warning-500 {
  background-color: var(--color-warning-500);
}
.bg-warning-600 {
  background-color: var(--color-warning-600);
}
.bg-warning-700 {
  background-color: var(--color-warning-700);
}
.bg-warning-800 {
  background-color: var(--color-warning-800);
}
.bg-warning-900 {
  background-color: var(--color-warning-900);
}
.bg-warning-950 {
  background-color: var(--color-warning-950);
}
.bg-green-50 {
  background-color: var(--color-green-50);
}
.bg-green-100 {
  background-color: var(--color-green-100);
}
.bg-green-200 {
  background-color: var(--color-green-200);
}
.bg-green-300 {
  background-color: var(--color-green-300);
}
.bg-green-400 {
  background-color: var(--color-green-400);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-green-600 {
  background-color: var(--color-green-600);
}
.bg-green-700 {
  background-color: var(--color-green-700);
}
.bg-green-800 {
  background-color: var(--color-green-800);
}
.bg-green-900 {
  background-color: var(--color-green-900);
}
.bg-green-950 {
  background-color: var(--color-green-950);
}
.bg-orange-50 {
  background-color: var(--color-orange-50);
}
.bg-orange-100 {
  background-color: var(--color-orange-100);
}
.bg-orange-200 {
  background-color: var(--color-orange-200);
}
.bg-orange-300 {
  background-color: var(--color-orange-300);
}
.bg-orange-400 {
  background-color: var(--color-orange-400);
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-orange-600 {
  background-color: var(--color-orange-600);
}
.bg-orange-700 {
  background-color: var(--color-orange-700);
}
.bg-orange-800 {
  background-color: var(--color-orange-800);
}
.bg-orange-900 {
  background-color: var(--color-orange-900);
}
.bg-orange-950 {
  background-color: var(--color-orange-950);
}
.bg-neutral-50 {
  background-color: var(--color-neutral-50);
}
.bg-neutral-100 {
  background-color: var(--color-neutral-100);
}
.bg-neutral-200 {
  background-color: var(--color-neutral-200);
}
.bg-neutral-300 {
  background-color: var(--color-neutral-300);
}
.bg-neutral-400 {
  background-color: var(--color-neutral-400);
}
.bg-neutral-500 {
  background-color: var(--color-neutral-500);
}
.bg-neutral-600 {
  background-color: var(--color-neutral-600);
}
.bg-neutral-700 {
  background-color: var(--color-neutral-700);
}
.bg-neutral-800 {
  background-color: var(--color-neutral-800);
}
.bg-neutral-900 {
  background-color: var(--color-neutral-900);
}
.bg-neutral-950 {
  background-color: var(--color-neutral-950);
}
.bg-neutral-Background {
  background-color: var(--color-neutral-Background);
}

.text-primary-50 {
  color: var(--color-primary-50);
}
.text-primary-100 {
  color: var(--color-primary-100);
}
.text-primary-200 {
  color: var(--color-primary-200);
}
.text-primary-300 {
  color: var(--color-primary-300);
}
.text-primary-400 {
  color: var(--color-primary-400);
}
.text-primary-500 {
  color: var(--color-primary-500);
}
.text-primary-600 {
  color: var(--color-primary-600);
}
.text-primary-700 {
  color: var(--color-primary-700);
}
.text-primary-800 {
  color: var(--color-primary-800);
}
.text-primary-900 {
  color: var(--color-primary-900);
}
.text-primary-950 {
  color: var(--color-primary-950);
}
.text-secondary-50 {
  color: var(--color-secondary-50);
}
.text-secondary-100 {
  color: var(--color-secondary-100);
}
.text-secondary-200 {
  color: var(--color-secondary-200);
}
.text-secondary-300 {
  color: var(--color-secondary-300);
}
.text-secondary-400 {
  color: var(--color-secondary-400);
}
.text-secondary-500 {
  color: var(--color-secondary-500);
}
.text-secondary-600 {
  color: var(--color-secondary-600);
}
.text-secondary-700 {
  color: var(--color-secondary-700);
}
.text-secondary-800 {
  color: var(--color-secondary-800);
}
.text-secondary-900 {
  color: var(--color-secondary-900);
}
.text-secondary-950 {
  color: var(--color-secondary-950);
}
.text-success-50 {
  color: var(--color-success-50);
}
.text-success-100 {
  color: var(--color-success-100);
}
.text-success-200 {
  color: var(--color-success-200);
}
.text-success-300 {
  color: var(--color-success-300);
}
.text-success-400 {
  color: var(--color-success-400);
}
.text-success-500 {
  color: var(--color-success-500);
}
.text-success-600 {
  color: var(--color-success-600);
}
.text-success-700 {
  color: var(--color-success-700);
}
.text-success-800 {
  color: var(--color-success-800);
}
.text-success-900 {
  color: var(--color-success-900);
}
.text-success-950 {
  color: var(--color-success-950);
}
.text-info-50 {
  color: var(--color-info-50);
}
.text-info-100 {
  color: var(--color-info-100);
}
.text-info-200 {
  color: var(--color-info-200);
}
.text-info-300 {
  color: var(--color-info-300);
}
.text-info-400 {
  color: var(--color-info-400);
}
.text-info-500 {
  color: var(--color-info-500);
}
.text-info-600 {
  color: var(--color-info-600);
}
.text-info-700 {
  color: var(--color-info-700);
}
.text-info-800 {
  color: var(--color-info-800);
}
.text-info-900 {
  color: var(--color-info-900);
}
.text-info-950 {
  color: var(--color-info-950);
}
.text-danger-50 {
  color: var(--color-danger-50);
}
.text-danger-100 {
  color: var(--color-danger-100);
}
.text-danger-200 {
  color: var(--color-danger-200);
}
.text-danger-300 {
  color: var(--color-danger-300);
}
.text-danger-400 {
  color: var(--color-danger-400);
}
.text-danger-500 {
  color: var(--color-danger-500);
}
.text-danger-600 {
  color: var(--color-danger-600);
}
.text-danger-700 {
  color: var(--color-danger-700);
}
.text-danger-800 {
  color: var(--color-danger-800);
}
.text-danger-900 {
  color: var(--color-danger-900);
}
.text-danger-950 {
  color: var(--color-danger-950);
}
.text-warning-50 {
  color: var(--color-warning-50);
}
.text-warning-100 {
  color: var(--color-warning-100);
}
.text-warning-200 {
  color: var(--color-warning-200);
}
.text-warning-300 {
  color: var(--color-warning-300);
}
.text-warning-400 {
  color: var(--color-warning-400);
}
.text-warning-500 {
  color: var(--color-warning-500);
}
.text-warning-600 {
  color: var(--color-warning-600);
}
.text-warning-700 {
  color: var(--color-warning-700);
}
.text-warning-800 {
  color: var(--color-warning-800);
}
.text-warning-900 {
  color: var(--color-warning-900);
}
.text-warning-950 {
  color: var(--color-warning-950);
}
.text-green-50 {
  color: var(--color-green-50);
}
.text-green-100 {
  color: var(--color-green-100);
}
.text-green-200 {
  color: var(--color-green-200);
}
.text-green-300 {
  color: var(--color-green-300);
}
.text-green-400 {
  color: var(--color-green-400);
}
.text-green-500 {
  color: var(--color-green-500);
}
.text-green-600 {
  color: var(--color-green-600);
}
.text-green-700 {
  color: var(--color-green-700);
}
.text-green-800 {
  color: var(--color-green-800);
}
.text-green-900 {
  color: var(--color-green-900);
}
.text-green-950 {
  color: var(--color-green-950);
}
.text-orange-50 {
  color: var(--color-orange-50);
}
.text-orange-100 {
  color: var(--color-orange-100);
}
.text-orange-200 {
  color: var(--color-orange-200);
}
.text-orange-300 {
  color: var(--color-orange-300);
}
.text-orange-400 {
  color: var(--color-orange-400);
}
.text-orange-500 {
  color: var(--color-orange-500);
}
.text-orange-600 {
  color: var(--color-orange-600);
}
.text-orange-700 {
  color: var(--color-orange-700);
}
.text-orange-800 {
  color: var(--color-orange-800);
}
.text-orange-900 {
  color: var(--color-orange-900);
}
.text-orange-950 {
  color: var(--color-orange-950);
}
.text-neutral-50 {
  color: var(--color-neutral-50);
}
.text-neutral-100 {
  color: var(--color-neutral-100);
}
.text-neutral-200 {
  color: var(--color-neutral-200);
}
.text-neutral-300 {
  color: var(--color-neutral-300);
}
.text-neutral-400 {
  color: var(--color-neutral-400);
}
.text-neutral-500 {
  color: var(--color-neutral-500);
}
.text-neutral-600 {
  color: var(--color-neutral-600);
}
.text-neutral-700 {
  color: var(--color-neutral-700);
}
.text-neutral-800 {
  color: var(--color-neutral-800);
}
.text-neutral-900 {
  color: var(--color-neutral-900);
}
.text-neutral-950 {
  color: var(--color-neutral-950);
}
.text-neutral-Background {
  color: var(--color-neutral-Background);
}
.bg-background-background {
  background-color: var(--color-background-background);
}
.bg-background-90 {
  background-color: var(--color-background-90);
}
.bg-background-80 {
  background-color: var(--color-background-80);
}
.bg-background-70 {
  background-color: var(--color-background-70);
}
.bg-background-60 {
  background-color: var(--color-background-60);
}
.bg-background-50 {
  background-color: var(--color-background-50);
}
.bg-background-40 {
  background-color: var(--color-background-40);
}
.bg-background-30 {
  background-color: var(--color-background-30);
}
.bg-background-20 {
  background-color: var(--color-background-20);
}
.bg-background-10 {
  background-color: var(--color-background-10);
}
.bg-background-05 {
  background-color: var(--color-background-05);
}