:root {
  --primary: #60a5fa;
  --primary-25: rgba(249, 250, 251, 1);
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  --secondary-50: #fff7ed;
  --secondary-100: #ffedd5;
  --secondary-200: #fed7aa;
  --secondary-300: #fdba74;
  --secondary-400: #fb923c;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;
  --secondary-700: #c2410c;
  --secondary-800: #9a3412;
  --secondary-900: #7c2d12;
  --secondary-950: #431407;

  --border-color:#dee2e6;
  --font-size:1;
  --font-weight:400;
  --font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --layout-width:100%;
  --bg-color:var(--primary-25);
}


.bg-primary { background-color: var(--primary)!important; }
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }
.bg-primary-950 { background-color: var(--primary-950); }

.text-primary { color: var(--primary)!important; }
.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }
.text-primary-950 { color: var(--primary-950); }


.border-primary { border-color: var(--primary); }
.border-primary-50 { border-color: var(--primary-50); }
.border-primary-100 { border-color: var(--primary-100); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-400 { border-color: var(--primary-400); }
.border-primary-500 { border-color: var(--primary-500); }
.border-primary-600 { border-color: var(--primary-600); }
.border-primary-700 { border-color: var(--primary-700); }
.border-primary-800 { border-color: var(--primary-800); }
.border-primary-900 { border-color: var(--primary-900); }
.border-primary-950 { border-color: var(--primary-950); }

.focus\:border-primary:focus { border-color: var(--primary); }
.focus\:border-primary-50:focus { border-color: var(--primary-50); }
.focus\:border-primary-100:focus { border-color: var(--primary-100); }
.focus\:border-primary-200:focus { border-color: var(--primary-200); }
.focus\:border-primary-300:focus { border-color: var(--primary-300); }
.focus\:border-primary-400:focus { border-color: var(--primary-400); }
.focus\:border-primary-500:focus { border-color: var(--primary-500); }
.focus\:border-primary-600:focus { border-color: var(--primary-600); }
.focus\:border-primary-700:focus { border-color: var(--primary-700); }
.focus\:border-primary-800:focus { border-color: var(--primary-800); }
.focus\:border-primary-900:focus { border-color: var(--primary-900); }
.focus\:border-primary-950:focus { border-color: var(--primary-950); }

.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-primary-50:hover { color: var(--primary-50); }
.hover\:text-primary-100:hover { color: var(--primary-100); }
.hover\:text-primary-200:hover { color: var(--primary-200); }
.hover\:text-primary-300:hover { color: var(--primary-300); }
.hover\:text-primary-400:hover { color: var(--primary-400); }
.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-primary-600:hover { color: var(--primary-600); }
.hover\:text-primary-700:hover { color: var(--primary-700); }
.hover\:text-primary-800:hover { color: var(--primary-800); }
.hover\:text-primary-900:hover { color: var(--primary-900); }
.hover\:text-primary-950:hover { color: var(--primary-950); }

.hover\:bg-primary:hover { background-color: var(--primary); }
.hover\:bg-primary-50:hover { background-color: var(--primary-50); }
.hover\:bg-primary-100:hover { background-color: var(--primary-100); }
.hover\:bg-primary-200:hover { background-color: var(--primary-200); }
.hover\:bg-primary-300:hover { background-color: var(--primary-300); }
.hover\:bg-primary-400:hover { background-color: var(--primary-400); }
.hover\:bg-primary-500:hover { background-color: var(--primary-500); }
.hover\:bg-primary-600:hover { background-color: var(--primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-primary-800:hover { background-color: var(--primary-800); }
.hover\:bg-primary-900:hover { background-color: var(--primary-900); }
.hover\:bg-primary-950:hover { background-color: var(--primary-950); }



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

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

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

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

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

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

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

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

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

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

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

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

.text-secondary {
color: var(--secondary-500);
}

.text-secondary-50 {
color: var(--secondary-50);
}

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

.text-secondary-200 {
color: var(--secondary-200);
}

.text-secondary-300 {
color: var(--secondary-300);
}

.text-secondary-400 {
color: var(--secondary-400);
}

.text-secondary-500 {
color: var(--secondary-500);
}

.text-secondary-600 {
color: var(--secondary-600);
}

.text-secondary-700 {
color: var(--secondary-700);
}

.text-secondary-800 {
color: var(--secondary-800);
}

.text-secondary-900 {
color: var(--secondary-900);
}

.text-secondary-950 {
color: var(--secondary-950);
}

.hover\:text-secondary:hover {
color: var(--secondary-500);
}

.hover\:text-secondary-50:hover {
color: var(--secondary-50);
}

.hover\:text-secondary-100:hover {
color: var(--secondary-100);
}

.hover\:text-secondary-200:hover {
color: var(--secondary-200);
}

.hover\:text-secondary-300:hover {
color: var(--secondary-300);
}

.hover\:text-secondary-400:hover {
color: var(--secondary-400);
}

.hover\:text-secondary-500:hover {
color: var(--secondary-500);
}

.hover\:text-secondary-600:hover {
color: var(--secondary-600);
}

.hover\:text-secondary-700:hover {
color: var(--secondary-700);
}

.hover\:text-secondary-800:hover {
color: var(--secondary-800);
}

.hover\:text-secondary-900:hover {
color: var(--secondary-900);
}

.hover\:bg-secondary:hover {
background-color: var(--secondary-500);
}

.hover\:bg-secondary-50:hover {
background-color: var(--secondary-50);
}

.hover\:bg-secondary-100:hover {
background-color: var(--secondary-100);
}

.hover\:bg-secondary-200:hover {
background-color: var(--secondary-200);
}

.hover\:bg-secondary-300:hover {
background-color: var(--secondary-300);
}

.hover\:bg-secondary-400:hover {
background-color: var(--secondary-400);
}

.hover\:bg-secondary-500:hover {
background-color: var(--secondary-500);
}

.hover\:bg-secondary-600:hover {
background-color: var(--secondary-600);
}

.hover\:bg-secondary-700:hover {
background-color: var(--secondary-700);
}

.hover\:bg-secondary-800:hover {
background-color: var(--secondary-800);
}

.hover\:bg-secondary-900:hover {
background-color: var(--secondary-900);
}