/* Root Colors */
:root {
  --primary-color: #3498db !important;
  --secondary-color: #1c1a5b;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  --dark-color: #1c1a5b;
  --light-color: #f8f9fa;

  --text-color: #1c1a5b;
  --bg-color: #fff;
  --accent-color: #6610f2;
}

/* Apply root colors */
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

/* Text color utilities */
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.text-success {
  color: var(--success-color) !important;
}
.text-danger {
  color: var(--danger-color) !important;
}
.text-warning {
  color: var(--warning-color) !important;
}
.text-info {
  color: var(--primary-color) !important;
}
.text-dark {
  color: var(--dark-color) !important;
}
.text-light {
  color: var(--light-color) !important;
}

/* Background utilities */
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-secondary {
  background-color: var(--secondary-color) !important;
}
.bg-success {
  background-color: var(--success-color) !important;
}
.bg-danger {
  background-color: var(--danger-color) !important;
}
.bg-warning {
  background-color: var(--warning-color) !important;
}
.bg-info {
  background-color: var(--info-color) !important;
}
.bg-dark {
  background-color: var(--dark-color) !important;
}
.bg-light {
  background-color: var(--light-color) !important;
}

/* Custom Margin and Padding Utilities (10 to 100 in steps of 10) */
:root {
  --spacer-10: 10px;
  --spacer-20: 20px;
  --spacer-30: 30px;
  --spacer-40: 40px;
  --spacer-50: 50px;
  --spacer-60: 60px;
  --spacer-70: 70px;
  --spacer-80: 80px;
  --spacer-90: 90px;
  --spacer-100: 100px;
}

/* Margin Top */
.mt-10 { margin-top: var(--spacer-10) !important; }
.mt-20 { margin-top: var(--spacer-20) !important; }
.mt-30 { margin-top: var(--spacer-30) !important; }
.mt-40 { margin-top: var(--spacer-40) !important; }
.mt-50 { margin-top: var(--spacer-50) !important; }
.mt-60 { margin-top: var(--spacer-60) !important; }
.mt-70 { margin-top: var(--spacer-70) !important; }
.mt-80 { margin-top: var(--spacer-80) !important; }
.mt-90 { margin-top: var(--spacer-90) !important; }
.mt-100 { margin-top: var(--spacer-100) !important; }

/* Padding Top */
.pt-10 { padding-top: var(--spacer-10) !important; }
.pt-20 { padding-top: var(--spacer-20) !important; }
.pt-30 { padding-top: var(--spacer-30) !important; }
.pt-40 { padding-top: var(--spacer-40) !important; }
.pt-50 { padding-top: var(--spacer-50) !important; }
.pt-60 { padding-top: var(--spacer-60) !important; }
.pt-70 { padding-top: var(--spacer-70) !important; }
.pt-80 { padding-top: var(--spacer-80) !important; }
.pt-90 { padding-top: var(--spacer-90) !important; }
.pt-100 { padding-top: var(--spacer-100) !important; }

/* Rounded Corners */
.rounded-4 { border-radius: var(--radius-4) !important; }
.rounded-8 { border-radius: var(--radius-8) !important; }
.rounded-12 { border-radius: var(--radius-12) !important; }
.rounded-16 { border-radius: var(--radius-16) !important; }
.rounded-20 { border-radius: var(--radius-20) !important; }
.rounded-24 { border-radius: var(--radius-24) !important; }
.rounded-30 { border-radius: var(--radius-30) !important; }
.rounded-40 { border-radius: var(--radius-40) !important; }
.rounded-50 { border-radius: var(--radius-50) !important; }
.rounded-100 { border-radius: var(--radius-100) !important; }

/* Similar for mb-, pb-, mt-, pt-, ml-, pl-, etc. if needed */
.btn-primary{
  background-color: var(--primary-color) !important;
}
.btn-secondy{
  background-color: var(--secondary-color) !important;
}
.bg-parimary{
  background-color: var(--primary-color) !important;
}