/*-----------------------------------------------------------------------------
 * Color System CSS
 * This file contains all color-related styles organized by component type
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
  /* Primary Colors */
  --magenta: #ED218E;           /* Primary magenta */
  --magenta-hover: #F338A2;
  --magenta-light: #F766B9;
  --magenta-light-hover: #FA94D1;

  --navy: #252759;              /* Primary navy */
  --navy-hover: #303270;
  --navy-light: #3D3E8A;
  --navy-light-hover: #4A4CA5;

  /* Additional Compatible Colors */
  --sapphire: #0055B7;          /* Sapphire blue */
  --sapphire-hover: #0066D9;
  --sapphire-light: #2D7DD2;
  --sapphire-light-hover: #4B95E9;

  --periwinkle: #7B68EE;        /* Periwinkle */
  --periwinkle-hover: #8A79FA;
  --periwinkle-light: #A296FA;
  --periwinkle-light-hover: #BDB4FF;
}

/*-----------------------------------------------------------------------------
 * Buttons
 *---------------------------------------------------------------------------*/

/* Default Button Structure */
[class*="btn-"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

/* Dark Background Buttons */
html .btn-magenta,
html .btn-magenta-light,
html .btn-navy,
html .btn-navy-light,
html .btn-sapphire,
html .btn-sapphire-light,
html .btn-periwinkle,
html .btn-periwinkle-light {
  color: #FFF;
}

/* Individual Button Colors */
html .btn-magenta { background-color: var(--magenta); border-color: var(--magenta); }
html .btn-magenta-light { background-color: var(--magenta-light); border-color: var(--magenta-light); }
html .btn-navy { background-color: var(--navy); border-color: var(--navy); }
html .btn-navy-light { background-color: var(--navy-light); border-color: var(--navy-light); }
html .btn-sapphire { background-color: var(--sapphire); border-color: var(--sapphire); }
html .btn-sapphire-light { background-color: var(--sapphire-light); border-color: var(--sapphire-light); }
html .btn-periwinkle { background-color: var(--periwinkle); border-color: var(--periwinkle); }
html .btn-periwinkle-light { background-color: var(--periwinkle-light); border-color: var(--periwinkle-light); }

/* Button Hover States */
html .btn-magenta:hover, html .btn-magenta.hover { background-color: var(--magenta-hover); border-color: var(--magenta-hover); }
html .btn-magenta-light:hover, html .btn-magenta-light.hover { background-color: var(--magenta-light-hover); border-color: var(--magenta-light-hover); }
html .btn-navy:hover, html .btn-navy.hover { background-color: var(--navy-hover); border-color: var(--navy-hover); }
html .btn-navy-light:hover, html .btn-navy-light.hover { background-color: var(--navy-light-hover); border-color: var(--navy-light-hover); }
html .btn-sapphire:hover, html .btn-sapphire.hover { background-color: var(--sapphire-hover); border-color: var(--sapphire-hover); }
html .btn-sapphire-light:hover, html .btn-sapphire-light.hover { background-color: var(--sapphire-light-hover); border-color: var(--sapphire-light-hover); }
html .btn-periwinkle:hover, html .btn-periwinkle.hover { background-color: var(--periwinkle-hover); border-color: var(--periwinkle-hover); }
html .btn-periwinkle-light:hover, html .btn-periwinkle-light.hover { background-color: var(--periwinkle-light-hover); border-color: var(--periwinkle-light-hover); }

/* Button Focus States */
html .btn-magenta:focus, html .btn-magenta.focus { box-shadow: 0 0 0 3px rgba(237, 33, 142, 0.5); background-color: var(--magenta); border-color: var(--magenta); }
html .btn-magenta-light:focus, html .btn-magenta-light.focus { box-shadow: 0 0 0 3px rgba(247, 102, 185, 0.5); background-color: var(--magenta-light); border-color: var(--magenta-light); }
html .btn-navy:focus, html .btn-navy.focus { box-shadow: 0 0 0 3px rgba(37, 39, 89, 0.5); background-color: var(--navy); border-color: var(--navy); }
html .btn-navy-light:focus, html .btn-navy-light.focus { box-shadow: 0 0 0 3px rgba(61, 62, 138, 0.5); background-color: var(--navy-light); border-color: var(--navy-light); }
html .btn-sapphire:focus, html .btn-sapphire.focus { box-shadow: 0 0 0 3px rgba(0, 85, 183, 0.5); background-color: var(--sapphire); border-color: var(--sapphire); }
html .btn-sapphire-light:focus, html .btn-sapphire-light.focus { box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.5); background-color: var(--sapphire-light); border-color: var(--sapphire-light); }
html .btn-periwinkle:focus, html .btn-periwinkle.focus { box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.5); background-color: var(--periwinkle); border-color: var(--periwinkle); }
html .btn-periwinkle-light:focus, html .btn-periwinkle-light.focus { box-shadow: 0 0 0 3px rgba(162, 150, 250, 0.5); background-color: var(--periwinkle-light); border-color: var(--periwinkle-light); }

/* Button Disabled States */
[class*="btn-"].disabled,
[class*="btn-"]:disabled {
  opacity: 0.65;
}

/* Outline Buttons */
html .btn-outline-magenta,
html .btn-outline-magenta-light,
html .btn-outline-navy,
html .btn-outline-navy-light,
html .btn-outline-sapphire,
html .btn-outline-sapphire-light,
html .btn-outline-periwinkle,
html .btn-outline-periwinkle-light {
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-magenta { color: var(--magenta); border-color: var(--magenta); }
html .btn-outline-magenta-light { color: var(--magenta-light); border-color: var(--magenta-light); }
html .btn-outline-navy { color: var(--navy); border-color: var(--navy); }
html .btn-outline-navy-light { color: var(--navy-light); border-color: var(--navy-light); }
html .btn-outline-sapphire { color: var(--sapphire); border-color: var(--sapphire); }
html .btn-outline-sapphire-light { color: var(--sapphire-light); border-color: var(--sapphire-light); }
html .btn-outline-periwinkle { color: var(--periwinkle); border-color: var(--periwinkle); }
html .btn-outline-periwinkle-light { color: var(--periwinkle-light); border-color: var(--periwinkle-light); }

/* Outline Button Hover States */
html .btn-outline-magenta:hover, html .btn-outline-magenta.hover { background-color: var(--magenta); border-color: var(--magenta); color: #FFF; }
html .btn-outline-magenta-light:hover, html .btn-outline-magenta-light.hover { background-color: var(--magenta-light); border-color: var(--magenta-light); color: #FFF; }
html .btn-outline-navy:hover, html .btn-outline-navy.hover { background-color: var(--navy); border-color: var(--navy); color: #FFF; }
html .btn-outline-navy-light:hover, html .btn-outline-navy-light.hover { background-color: var(--navy-light); border-color: var(--navy-light); color: #FFF; }
html .btn-outline-sapphire:hover, html .btn-outline-sapphire.hover { background-color: var(--sapphire); border-color: var(--sapphire); color: #FFF; }
html .btn-outline-sapphire-light:hover, html .btn-outline-sapphire-light.hover { background-color: var(--sapphire-light); border-color: var(--sapphire-light); color: #FFF; }
html .btn-outline-periwinkle:hover, html .btn-outline-periwinkle.hover { background-color: var(--periwinkle); border-color: var(--periwinkle); color: #FFF; }
html .btn-outline-periwinkle-light:hover, html .btn-outline-periwinkle-light.hover { background-color: var(--periwinkle-light); border-color: var(--periwinkle-light); color: #FFF; }

/* Outline Button Focus States */
html .btn-outline-magenta:focus, html .btn-outline-magenta.focus { box-shadow: 0 0 0 3px rgba(237, 33, 142, 0.5); }
html .btn-outline-magenta-light:focus, html .btn-outline-magenta-light.focus { box-shadow: 0 0 0 3px rgba(247, 102, 185, 0.5); }
html .btn-outline-navy:focus, html .btn-outline-navy.focus { box-shadow: 0 0 0 3px rgba(37, 39, 89, 0.5); }
html .btn-outline-navy-light:focus, html .btn-outline-navy-light.focus { box-shadow: 0 0 0 3px rgba(61, 62, 138, 0.5); }
html .btn-outline-sapphire:focus, html .btn-outline-sapphire.focus { box-shadow: 0 0 0 3px rgba(0, 85, 183, 0.5); }
html .btn-outline-sapphire-light:focus, html .btn-outline-sapphire-light.focus { box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.5); }
html .btn-outline-periwinkle:focus, html .btn-outline-periwinkle.focus { box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.5); }
html .btn-outline-periwinkle-light:focus, html .btn-outline-periwinkle-light.focus { box-shadow: 0 0 0 3px rgba(162, 150, 250, 0.5); }

/* Button Size Variations */
html [class*="btn-outline-"].btn-xs {
  padding: 2.4px 8px;
  padding: 0.15rem 0.5rem;
}

html [class*="btn-outline-"].btn-sm {
  padding: 4px 10.4px;
  padding: 0.25rem 0.65rem;
}

html [class*="btn-outline-"].btn-lg {
  padding: 7.2px 16px;
  padding: 0.45rem 1rem;
}

html [class*="btn-outline-"].btn-xl {
  padding: 12px 32px;
  padding: 0.75rem 2rem;
}

html [class*="btn-outline-"].btn-outline-thin {
  border-width: 1px;
}

/*-----------------------------------------------------------------------------
 * Text Styles
 *---------------------------------------------------------------------------*/
html .heading-magenta,
html .lnk-magenta,
html .text-color-magenta,
html .text-magenta { color: var(--magenta) !important; }

html .heading-magenta-light,
html .lnk-magenta-light,
html .text-color-magenta-light,
html .text-magenta-light { color: var(--magenta-light) !important; }

html .heading-navy,
html .lnk-navy,
html .text-color-navy,
html .text-navy { color: var(--navy) !important; }

html .heading-navy-light,
html .lnk-navy-light,
html .text-color-navy-light,
html .text-navy-light { color: var(--navy-light) !important; }

html .heading-sapphire,
html .lnk-sapphire,
html .text-color-sapphire,
html .text-sapphire { color: var(--sapphire) !important; }

html .heading-sapphire-light,
html .lnk-sapphire-light,
html .text-color-sapphire-light,
html .text-sapphire-light { color: var(--sapphire-light) !important; }

html .heading-periwinkle,
html .lnk-periwinkle,
html .text-color-periwinkle,
html .text-periwinkle { color: var(--periwinkle) !important; }

html .heading-periwinkle-light,
html .lnk-periwinkle-light,
html .text-color-periwinkle-light,
html .text-periwinkle-light { color: var(--periwinkle-light) !important; }

/* Text Hover Colors */
html .text-color-hover-magenta:hover,
html .text-hover-magenta:hover { color: var(--magenta) !important; }

html .text-color-hover-magenta-light:hover,
html .text-hover-magenta-light:hover { color: var(--magenta-light) !important; }

html .text-color-hover-navy:hover,
html .text-hover-navy:hover { color: var(--navy) !important; }

html .text-color-hover-navy-light:hover,
html .text-hover-navy-light:hover { color: var(--navy-light) !important; }

html .text-color-hover-sapphire:hover,
html .text-hover-sapphire:hover { color: var(--sapphire) !important; }

html .text-color-hover-sapphire-light:hover,
html .text-hover-sapphire-light:hover { color: var(--sapphire-light) !important; }

html .text-color-hover-periwinkle:hover,
html .text-hover-periwinkle:hover { color: var(--periwinkle) !important; }

html .text-color-hover-periwinkle-light:hover,
html .text-hover-periwinkle-light:hover { color: var(--periwinkle-light) !important; }

/*-----------------------------------------------------------------------------
 * Background Colors
 *---------------------------------------------------------------------------*/
html .bg-magenta,
html .background-color-magenta { background-color: var(--magenta) !important; }

html .bg-magenta-light,
html .background-color-magenta-light { background-color: var(--magenta-light) !important; }

html .bg-navy,
html .background-color-navy { background-color: var(--navy) !important; }

html .bg-navy-light,
html .background-color-navy-light { background-color: var(--navy-light) !important; }

html .bg-sapphire,
html .background-color-sapphire { background-color: var(--sapphire) !important; }

html .bg-sapphire-light,
html .background-color-sapphire-light { background-color: var(--sapphire-light) !important; }

html .bg-periwinkle,
html .background-color-periwinkle { background-color: var(--periwinkle) !important; }

html .bg-periwinkle-light,
html .background-color-periwinkle-light { background-color: var(--periwinkle-light) !important; }

/*-----------------------------------------------------------------------------
 * Badges
 *---------------------------------------------------------------------------*/
/* All Badges */
.badge-magenta,
.badge-magenta-light,
.badge-navy,
.badge-navy-light,
.badge-sapphire,
.badge-sapphire-light,
.badge-periwinkle,
.badge-periwinkle-light {
  color: #FFF;
}

/* Badge Background Colors */
.badge-magenta { background: var(--magenta-hover); }
.badge-magenta-light { background: var(--magenta-light-hover); }
.badge-navy { background: var(--navy-hover); }
.badge-navy-light { background: var(--navy-light-hover); }
.badge-sapphire { background: var(--sapphire-hover); }
.badge-sapphire-light { background: var(--sapphire-light-hover); }
.badge-periwinkle { background: var(--periwinkle-hover); }
.badge-periwinkle-light { background: var(--periwinkle-light-hover); }

/*-----------------------------------------------------------------------------
 * Alerts
 *---------------------------------------------------------------------------*/
/* All Alerts */
.alert-magenta,
.alert-magenta-light,
.alert-navy,
.alert-navy-light,
.alert-sapphire,
.alert-sapphire-light,
.alert-periwinkle,
.alert-periwinkle-light {
  color: #FFF;
}

/* Alert Colors */
.alert-magenta { background-color: var(--magenta); border-color: var(--magenta); }
.alert-magenta-light { background-color: var(--magenta-light); border-color: var(--magenta-light); }
.alert-navy { background-color: var(--navy); border-color: var(--navy); }
.alert-navy-light { background-color: var(--navy-light); border-color: var(--navy-light); }
.alert-sapphire { background-color: var(--sapphire); border-color: var(--sapphire); }
.alert-sapphire-light { background-color: var(--sapphire-light); border-color: var(--sapphire-light); }
.alert-periwinkle { background-color: var(--periwinkle); border-color: var(--periwinkle); }
.alert-periwinkle-light { background-color: var(--periwinkle-light); border-color: var(--periwinkle-light); }

/* Alert Links */
[class*="alert-"] .alert-link {
  text-decoration: underline;
}

/* All Alert Links */
.alert-magenta .alert-link,
.alert-magenta-light .alert-link,
.alert-navy .alert-link,
.alert-navy-light .alert-link,
.alert-sapphire .alert-link,
.alert-sapphire-light .alert-link,
.alert-periwinkle .alert-link,
.alert-periwinkle-light .alert-link {
  color: #FFF;
}

/*-----------------------------------------------------------------------------
 * Gradient Backgrounds
 *---------------------------------------------------------------------------*/
.bg-gradient-magenta {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-light) 100%);
  color: #FFF;
}

.bg-gradient-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #FFF;
}

.bg-gradient-sapphire {
  background: linear-gradient(135deg, var(--sapphire) 0%, var(--sapphire-light) 100%);
  color: #FFF;
}

.bg-gradient-periwinkle {
  background: linear-gradient(135deg, var(--periwinkle) 0%, var(--periwinkle-light) 100%);
  color: #FFF;
}

.bg-gradient-magenta-navy {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--navy) 100%);
  color: #FFF;
}

.bg-gradient-navy-sapphire {
  background: linear-gradient(135deg, var(--navy) 0%, var(--sapphire) 100%);
  color: #FFF;
}

.bg-gradient-magenta-periwinkle {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--periwinkle) 100%);
  color: #FFF;
}

/*-----------------------------------------------------------------------------
 * Border Utilities
 *---------------------------------------------------------------------------*/
.border-magenta { border-color: var(--magenta) !important; }
.border-magenta-light { border-color: var(--magenta-light) !important; }
.border-navy { border-color: var(--navy) !important; }
.border-navy-light { border-color: var(--navy-light) !important; }
.border-sapphire { border-color: var(--sapphire) !important; }
.border-sapphire-light { border-color: var(--sapphire-light) !important; }
.border-periwinkle { border-color: var(--periwinkle) !important; }
.border-periwinkle-light { border-color: var(--periwinkle-light) !important; }

/*-----------------------------------------------------------------------------
 * Bootstrap 5 Integration - Additional Helper Classes
 *---------------------------------------------------------------------------*/
/* Card Accent Colors */
.card-accent-magenta { border-top: 4px solid var(--magenta); }
.card-accent-navy { border-top: 4px solid var(--navy); }
.card-accent-sapphire { border-top: 4px solid var(--sapphire); }
.card-accent-periwinkle { border-top: 4px solid var(--periwinkle); }

/* Form Focus Colors */
.form-control:focus.focus-magenta { border-color: var(--magenta); box-shadow: 0 0 0 0.25rem rgba(237, 33, 142, 0.25); }
.form-control:focus.focus-navy { border-color: var(--navy); box-shadow: 0 0 0 0.25rem rgba(37, 39, 89, 0.25); }
.form-control:focus.focus-sapphire { border-color: var(--sapphire); box-shadow: 0 0 0 0.25rem rgba(0, 85, 183, 0.25); }
.form-control:focus.focus-periwinkle { border-color: var(--periwinkle); box-shadow: 0 0 0 0.25rem rgba(123, 104, 238, 0.25); }

/* List Group Colors */
.list-group-item-magenta { background-color: rgba(237, 33, 142, 0.1); color: var(--magenta); }
.list-group-item-navy { background-color: rgba(37, 39, 89, 0.1); color: var(--navy); }
.list-group-item-sapphire { background-color: rgba(0, 85, 183, 0.1); color: var(--sapphire); }
.list-group-item-periwinkle { background-color: rgba(123, 104, 238, 0.1); color: var(--periwinkle); }