/* Material Design 3 Enhanced Colors */
.bg-primary {
  background-color: #6750A4 !important; /* Material Purple */
}

.bg-secondary {
  background-color: #625B71 !important; /* Material Neutral Variant */
}

.bg-success {
  background-color: #006A6B !important; /* Material Teal */
}

.bg-info {
  background-color: #0061A4 !important; /* Material Blue */
}

.bg-warning {
  background-color: #7D5260 !important; /* Material Tertiary */
}

.bg-danger {
  background-color: #BA1A1A !important; /* Material Error */
}

.bg-light {
  background-color: #FEF7FF !important; /* Material Surface */
}

.bg-dark {
  background-color: #1C1B1F !important; /* Material Surface Dark */
}

.bg-white {
  background-color: #FFFBFE !important; /* Material Surface Container */
}

.bg-body {
  background-color: #FFFBFE !important; /* Material Surface Container */
}

.bg-transparent {
  background-color: transparent !important;
}

/* Material Design Neutral Palette */
.bg-gray-100 {
  background-color: #F7F2FA !important; /* Material Neutral 95 */
}

.bg-gray-200 {
  background-color: #F0EDF1 !important; /* Material Neutral 90 */
}

.bg-gray-300 {
  background-color: #E6E0E9 !important; /* Material Neutral 87 */
}

.bg-gray-400 {
  background-color: #CAC4D0 !important; /* Material Neutral 80 */
}

.bg-gray-500 {
  background-color: #938F99 !important; /* Material Neutral 60 */
}

.bg-gray-600 {
  background-color: #79747E !important; /* Material Neutral 50 */
}

.bg-gray-700 {
  background-color: #605D66 !important; /* Material Neutral 40 */
}

.bg-gray-800 {
  background-color: #484649 !important; /* Material Neutral 30 */
}

.bg-gray-900 {
  background-color: #313033 !important; /* Material Neutral 20 */
}

/* Material Design Enhanced Gradients */
.bg-gradient-primary {
  background-image: linear-gradient(135deg, #6750A4 0%, #7F39FB 100%); /* Material Purple Gradient */
}

.bg-gradient-secondary {
  background-image: linear-gradient(135deg, #625B71 0%, #8B5A83 100%); /* Material Neutral Variant Gradient */
}

.bg-gradient-success {
  background-image: linear-gradient(135deg, #006A6B 0%, #00A693 100%); /* Material Teal Gradient */
}

.bg-gradient-info {
  background-image: linear-gradient(135deg, #0061A4 0%, #1976D2 100%); /* Material Blue Gradient */
}

.bg-gradient-warning {
  background-image: linear-gradient(135deg, #7D5260 0%, #B85450 100%); /* Material Tertiary Gradient */
}

.bg-gradient-danger {
  background-image: linear-gradient(135deg, #BA1A1A 0%, #F44336 100%); /* Material Error Gradient */
}

.bg-gradient-light {
  background-image: linear-gradient(135deg, #FEF7FF 0%, #F7F2FA 100%); /* Material Light Gradient */
}

.bg-gradient-dark {
  background-image: linear-gradient(135deg, #1C1B1F 0%, #313033 100%); /* Material Dark Gradient */
}

/* Material Design Faded Gradients */
.bg-gradient-faded-primary {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(103, 80, 164, 0.4) 0%, rgba(127, 57, 251, 0.2) 100%);
}

.bg-gradient-faded-secondary {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(98, 91, 113, 0.4) 0%, rgba(139, 90, 131, 0.2) 100%);
}

.bg-gradient-faded-success {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(0, 106, 107, 0.4) 0%, rgba(0, 166, 147, 0.2) 100%);
}

.bg-gradient-faded-info {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(0, 97, 164, 0.4) 0%, rgba(25, 118, 210, 0.2) 100%);
}

.bg-gradient-faded-warning {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(125, 82, 96, 0.4) 0%, rgba(184, 84, 80, 0.2) 100%);
}

.bg-gradient-faded-danger {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(186, 26, 26, 0.4) 0%, rgba(244, 67, 54, 0.2) 100%);
}

.bg-gradient-faded-light {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(254, 247, 255, 0.6) 0%, rgba(247, 242, 250, 0.3) 100%);
}

.bg-gradient-faded-dark {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(28, 27, 31, 0.6) 0%, rgba(49, 48, 51, 0.4) 100%);
}

.bg-gradient-faded-white {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(255, 251, 254, 0.6) 0%, rgba(247, 242, 250, 0.3) 100%);
}

/* Material Design Vertical Faded Gradients */
.bg-gradient-faded-primary-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(103, 80, 164, 0.3) 0%, #6750A4 100%);
}

.bg-gradient-faded-secondary-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(98, 91, 113, 0.3) 0%, #625B71 100%);
}

.bg-gradient-faded-success-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(0, 106, 107, 0.3) 0%, #006A6B 100%);
}

.bg-gradient-faded-info-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(0, 97, 164, 0.3) 0%, #0061A4 100%);
}

.bg-gradient-faded-warning-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(125, 82, 96, 0.3) 0%, #7D5260 100%);
}

.bg-gradient-faded-danger-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(186, 26, 26, 0.3) 0%, #BA1A1A 100%);
}

.bg-gradient-faded-light-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(254, 247, 255, 0.3) 0%, #FEF7FF 100%);
}

.bg-gradient-faded-dark-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(28, 27, 31, 0.3) 0%, #1C1B1F 100%);
}

.bg-gradient-faded-white-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(255, 251, 254, 0.3) 0%, #FFFBFE 100%);
}

/* Additional Material Design Color Tokens */
.bg-surface-variant {
  background-color: #E7E0EC !important;
}

.bg-on-surface {
  background-color: #1C1B1F !important;
}

.bg-on-surface-variant {
  background-color: #49454F !important;
}

.bg-outline {
  background-color: #79747E !important;
}

.bg-outline-variant {
  background-color: #CAC4D0 !important;
}

.bg-inverse-surface {
  background-color: #313033 !important;
}

.bg-inverse-on-surface {
  background-color: #F4EFF4 !important;
}

.bg-inverse-primary {
  background-color: #D0BCFF !important;
}

/* Material Design Button Colors */
.btn-primary {
  background-color: #6750A4 !important;
  border-color: #6750A4 !important;
  color: #FFFFFF !important;
}

.btn-primary:hover {
  background-color: #7F39FB !important;
  border-color: #7F39FB !important;
  color: #FFFFFF !important;
}

.btn-primary:focus, .btn-primary.focus {
  background-color: #7F39FB !important;
  border-color: #7F39FB !important;
  box-shadow: 0 0 0 0.2rem rgba(103, 80, 164, 0.25) !important;
}

.btn-primary:active, .btn-primary.active {
  background-color: #5A4570 !important;
  border-color: #5A4570 !important;
}

.btn-secondary {
  background-color: #625B71 !important;
  border-color: #625B71 !important;
  color: #FFFFFF !important;
}

.btn-secondary:hover {
  background-color: #8B5A83 !important;
  border-color: #8B5A83 !important;
  color: #FFFFFF !important;
}

.btn-secondary:focus, .btn-secondary.focus {
  background-color: #8B5A83 !important;
  border-color: #8B5A83 !important;
  box-shadow: 0 0 0 0.2rem rgba(98, 91, 113, 0.25) !important;
}

.btn-secondary:active, .btn-secondary.active {
  background-color: #4F4A5C !important;
  border-color: #4F4A5C !important;
}

.btn-success {
  background-color: #006A6B !important;
  border-color: #006A6B !important;
  color: #FFFFFF !important;
}

.btn-success:hover {
  background-color: #00A693 !important;
  border-color: #00A693 !important;
  color: #FFFFFF !important;
}

.btn-success:focus, .btn-success.focus {
  background-color: #00A693 !important;
  border-color: #00A693 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 106, 107, 0.25) !important;
}

.btn-success:active, .btn-success.active {
  background-color: #004F50 !important;
  border-color: #004F50 !important;
}

.btn-info {
  background-color: #0061A4 !important;
  border-color: #0061A4 !important;
  color: #FFFFFF !important;
}

.btn-info:hover {
  background-color: #1976D2 !important;
  border-color: #1976D2 !important;
  color: #FFFFFF !important;
}

.btn-info:focus, .btn-info.focus {
  background-color: #1976D2 !important;
  border-color: #1976D2 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 97, 164, 0.25) !important;
}

.btn-info:active, .btn-info.active {
  background-color: #004A7C !important;
  border-color: #004A7C !important;
}

.btn-warning {
  background-color: #7D5260 !important;
  border-color: #7D5260 !important;
  color: #FFFFFF !important;
}

.btn-warning:hover {
  background-color: #B85450 !important;
  border-color: #B85450 !important;
  color: #FFFFFF !important;
}

.btn-warning:focus, .btn-warning.focus {
  background-color: #B85450 !important;
  border-color: #B85450 !important;
  box-shadow: 0 0 0 0.2rem rgba(125, 82, 96, 0.25) !important;
}

.btn-warning:active, .btn-warning.active {
  background-color: #5F3E47 !important;
  border-color: #5F3E47 !important;
}

.btn-danger {
  background-color: #BA1A1A !important;
  border-color: #BA1A1A !important;
  color: #FFFFFF !important;
}

.btn-danger:hover {
  background-color: #F44336 !important;
  border-color: #F44336 !important;
  color: #FFFFFF !important;
}

.btn-danger:focus, .btn-danger.focus {
  background-color: #F44336 !important;
  border-color: #F44336 !important;
  box-shadow: 0 0 0 0.2rem rgba(186, 26, 26, 0.25) !important;
}

.btn-danger:active, .btn-danger.active {
  background-color: #8F1414 !important;
  border-color: #8F1414 !important;
}

.btn-light {
  background-color: #FEF7FF !important;
  border-color: #E7E0EC !important;
  color: #1C1B1F !important;
}

.btn-light:hover {
  background-color: #F7F2FA !important;
  border-color: #CAC4D0 !important;
  color: #1C1B1F !important;
}

.btn-light:focus, .btn-light.focus {
  background-color: #F7F2FA !important;
  border-color: #CAC4D0 !important;
  box-shadow: 0 0 0 0.2rem rgba(254, 247, 255, 0.25) !important;
}

.btn-light:active, .btn-light.active {
  background-color: #F0EDF1 !important;
  border-color: #938F99 !important;
}

.btn-dark {
  background-color: #1C1B1F !important;
  border-color: #1C1B1F !important;
  color: #FFFFFF !important;
}

.btn-dark:hover {
  background-color: #313033 !important;
  border-color: #313033 !important;
  color: #FFFFFF !important;
}

.btn-dark:focus, .btn-dark.focus {
  background-color: #313033 !important;
  border-color: #313033 !important;
  box-shadow: 0 0 0 0.2rem rgba(28, 27, 31, 0.25) !important;
}

.btn-dark:active, .btn-dark.active {
  background-color: #0F0E11 !important;
  border-color: #0F0E11 !important;
}

/* Material Design Outline Button Colors */
.btn-outline-primary {
  color: #6750A4 !important;
  border-color: #6750A4 !important;
}

.btn-outline-primary:hover {
  background-color: #6750A4 !important;
  border-color: #6750A4 !important;
  color: #FFFFFF !important;
}

.btn-outline-secondary {
  color: #625B71 !important;
  border-color: #625B71 !important;
}

.btn-outline-secondary:hover {
  background-color: #625B71 !important;
  border-color: #625B71 !important;
  color: #FFFFFF !important;
}

.btn-outline-success {
  color: #006A6B !important;
  border-color: #006A6B !important;
}

.btn-outline-success:hover {
  background-color: #006A6B !important;
  border-color: #006A6B !important;
  color: #FFFFFF !important;
}

.btn-outline-info {
  color: #0061A4 !important;
  border-color: #0061A4 !important;
}

.btn-outline-info:hover {
  background-color: #0061A4 !important;
  border-color: #0061A4 !important;
  color: #FFFFFF !important;
}

.btn-outline-warning {
  color: #7D5260 !important;
  border-color: #7D5260 !important;
}

.btn-outline-warning:hover {
  background-color: #7D5260 !important;
  border-color: #7D5260 !important;
  color: #FFFFFF !important;
}

.btn-outline-danger {
  color: #BA1A1A !important;
  border-color: #BA1A1A !important;
}

.btn-outline-danger:hover {
  background-color: #BA1A1A !important;
  border-color: #BA1A1A !important;
  color: #FFFFFF !important;
}

.btn-outline-light {
  color: #79747E !important;
  border-color: #E7E0EC !important;
}

.btn-outline-light:hover {
  background-color: #FEF7FF !important;
  border-color: #E7E0EC !important;
  color: #1C1B1F !important;
}

.btn-outline-dark {
  color: #1C1B1F !important;
  border-color: #1C1B1F !important;
}

.btn-outline-dark:hover {
  background-color: #1C1B1F !important;
  border-color: #1C1B1F !important;
  color: #FFFFFF !important;
}