/* 
 * Standardized Color Scheme for DDAI
 * Use these CSS custom properties throughout the site for consistent branding
 */

:root {
  /* Primary Color Palette */
  --color-primary: #F5B041;           /* Orange/Golden Yellow */
  --color-primary-rgb: 245, 176, 65;
  
  --color-secondary: #A6F6AF;         /* Light Green/Mint Green */  
  --color-secondary-rgb: 166, 246, 175;
  
  --color-dark: #232B2B;              /* Dark Gray/Charcoal */
  --color-dark-rgb: 35, 43, 43;

  /* Additional RGB values */
  --color-white-rgb: 255, 255, 255;

  /* Bootstrap Variable Mappings - Align Bootstrap theme utilities with brand colors */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-dark: var(--color-dark);
  --bs-dark-rgb: var(--color-dark-rgb);
  --bs-light: var(--color-gray-light);
  --bs-white: var(--color-white);
  --bs-white-rgb: var(--color-white-rgb);

  /* Color Variations */
  --color-primary-light: #F7C471;     /* Lighter orange */
  --color-primary-dark: #E29E1B;      /* Darker orange */
  
  --color-secondary-light: #C1F9C8;   /* Lighter green */
  --color-secondary-dark: #8BF096;    /* Darker green */
  
  --color-dark-light: #3A4646;        /* Lighter dark */
  --color-dark-dark: #1A1F1F;         /* Darker dark */

  /* Utility Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-light: #F8F9FA;
  --color-gray: #6C757D;
  --color-gray-dark: #495057;

  /* Semantic Colors */
  --color-success: var(--color-secondary);
  --color-warning: var(--color-primary);
  --color-danger: #DC3545;
  --color-info: #17A2B8;

  /* Background Colors */
  --bg-primary: var(--color-primary);
  --bg-secondary: var(--color-secondary);
  --bg-dark: var(--color-dark);
  --bg-light: var(--color-gray-light);

  /* Text Colors */
  --text-primary: var(--color-primary);
  --text-secondary: var(--color-secondary);
  --text-dark: var(--color-dark);
  --text-light: var(--color-white);
  --text-muted: var(--color-gray);

  /* Border Colors */
  --border-primary: var(--color-primary);
  --border-secondary: var(--color-secondary);
  --border-dark: var(--color-dark);
  --border-light: #DEE2E6;
}

/* Utility Classes for Quick Styling */

/* Background Utilities */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; }

/* Text Utilities */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-secondary-dark { color: var(--color-secondary-dark) !important; }

/* Border Utilities */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-dark { border-color: var(--color-dark) !important; }

/* Button Styling */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-dark);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-dark);
}

.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: var(--color-dark-light);
  border-color: var(--color-dark-light);
  color: var(--color-white);
}

/* Link Styling */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Card Styling */
.card-primary {
  border-color: var(--color-primary);
}

.card-primary .card-header {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-bottom-color: var(--color-primary);
}

.card-secondary {
  border-color: var(--color-secondary);
}

.card-secondary .card-header {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-bottom-color: var(--color-secondary);
}

/* Alert Styling */
.alert-primary {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.alert-secondary {
  background-color: rgba(var(--color-secondary-rgb), 0.1);
  border-color: var(--color-secondary);
  color: var(--color-dark);
}

/* Custom Brand Classes */
.ddai-brand-primary {
  color: var(--color-primary);
}

.ddai-brand-secondary {
  color: var(--color-secondary);
}

.ddai-brand-dark {
  color: var(--color-dark);
}

/* Missing utility classes */
.bg-light-green {
  background-color: var(--color-secondary) !important;
}

.text-custom-dark {
  color: var(--color-dark) !important;
}

.border-light-green {
  border-color: var(--color-secondary) !important;
}

/* Gradient Utilities */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
}

.gradient-brand {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Shadow Utilities with Brand Colors */
.shadow-primary {
  box-shadow: 0 0.5rem 1rem rgba(var(--color-primary-rgb), 0.15);
}

.shadow-secondary {
  box-shadow: 0 0.5rem 1rem rgba(var(--color-secondary-rgb), 0.15);
}

.shadow-dark {
  box-shadow: 0 0.5rem 1rem rgba(var(--color-dark-rgb), 0.15);
}