:root {
  --color-primary: #03045e;
  --color-secondary: #0077b6;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #00b4d8;
  --color-light: #f8f9fa;
  --color-dark: #343a40;

  --font-family-sans-serif: 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: 'Georgia', serif;
  --font-family-monospace: 'Courier New', Courier, monospace;

  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-sm: 0.875rem; /* 14px */
}

.custom-bg-primary {
  background-color: var(--color-primary) !important;
}
.custom-bg-secondary {
  background-color: var(--color-secondary) !important;
}
.custom-bg-success {
  background-color: var(--color-success) !important;
}
.custom-bg-danger {
  background-color: var(--color-danger) !important;
}
.custom-bg-warning {
  background-color: var(--color-warning) !important;
}
.custom-bg-info {
  background-color: var(--color-info) !important;
}
.custom-bg-light {
  background-color: var(--color-light) !important;
}
.custom-bg-dark {
  background-color: var(--color-dark) !important;
}
.custom-text-primary {
  color: var(--color-primary) !important;
}
.custom-text-secondary {
  color: var(--color-secondary) !important;
}
.custom-text-light {
  color: var(--color-light) !important;
}
.custom-text-dark {
  color: var(--color-dark) !important;
}
.custom-text-info {
  color: var(--color-info) !important;
}
.custom-text-danger {
  color: var(--color-danger) !important;
}

.custom-btn-primary {
  background-color: var(--color-primary);
  color: white;
}
.custom-btn-secondary {
  background-color: var(--color-secondary);
  color: white;
}
.custom-btn-success {
  background-color: var(--color-success);
  color: white;
}
.custom-btn-danger {
  background-color: var(--color-danger);
  color: white;
}
.custom-btn-warning {
  background-color: var(--color-warning);
  color: black;
}
.custom-btn-info {
  background-color: var(--color-info) !important;
  border: 1px solid var(--color-info) !important;
  color: white;
}
.custom-btn-light {
  background-color: var(--color-light);
  color: black;
}
.custom-btn-dark {
  background-color: var(--color-dark);
  color: white;
}
.custom-font-size-base {
  font-size: var(--font-size-base) !important;
}
.custom-font-size-lg {
  font-size: var(--font-size-lg);
}
.custom-font-size-sm {
  font-size: var(--font-size-sm) !important;
}
.custom-font-family-sans-serif {
  font-family: var(--font-family-sans-serif);
}
.custom-font-family-serif {
  font-family: var(--font-family-serif);
}