/**
 * AIM Component Color Theming System
 *
 * Opt-in approach: Only elements with specific classes use the custom primary.
 * Everything else keeps the default Bootstrap primary.
 *
 * Usage:
 *   - Set data-aim-primary on container with --aim-page-primary CSS variable
 *   - Add .aim-primary-bg for backgrounds
 *   - Add .aim-primary-text for text color
 *   - Add .aim-primary-border for borders
 *   - Add .aim-primary-btn for buttons
 *   - Add data-aim-color-mode="light" on container for light colors (dark text)
 */

/* ==========================================================================
   BASE - Define CSS variables
   ========================================================================== */

[data-aim-primary] {
  /* Text color on primary background - default to white for dark colors */
  --aim-text-on-primary: #fff;
}

/* Light color mode - dark text on light backgrounds */
[data-aim-primary][data-aim-color-mode="light"] {
  --aim-text-on-primary: #2f2b3d;
}

/* ==========================================================================
   OPT-IN BACKGROUNDS
   ========================================================================== */

[data-aim-primary] .aim-primary-bg {
  background-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

[data-aim-primary] .aim-primary-bg-subtle {
  background-color: color-mix(in sRGB, var(--aim-page-primary) 16%, transparent) !important;
}

/* ==========================================================================
   OPT-IN TEXT
   ========================================================================== */

[data-aim-primary] .aim-primary-text {
  color: var(--aim-page-primary) !important;
}

/* ==========================================================================
   OPT-IN BORDERS
   ========================================================================== */

[data-aim-primary] .aim-primary-border {
  border-color: var(--aim-page-primary) !important;
}

/* ==========================================================================
   OPT-IN BUTTONS
   ========================================================================== */

/* Solid primary button */
[data-aim-primary] .aim-primary-btn {
  background-color: var(--aim-page-primary) !important;
  border-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

[data-aim-primary] .aim-primary-btn:hover,
[data-aim-primary] .aim-primary-btn:focus {
  background-color: color-mix(in sRGB, var(--aim-page-primary) 85%, black) !important;
  border-color: color-mix(in sRGB, var(--aim-page-primary) 85%, black) !important;
}

/* Label/soft primary button */
[data-aim-primary] .aim-primary-btn-label {
  color: var(--aim-page-primary) !important;
  background-color: color-mix(in sRGB, var(--aim-page-primary) 16%, transparent) !important;
  border-color: transparent !important;
}

[data-aim-primary] .aim-primary-btn-label:hover,
[data-aim-primary] .aim-primary-btn-label:focus {
  background-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

/* Outline primary button */
[data-aim-primary] .aim-primary-btn-outline {
  color: var(--aim-page-primary) !important;
  border-color: var(--aim-page-primary) !important;
  background-color: transparent !important;
}

[data-aim-primary] .aim-primary-btn-outline:hover,
[data-aim-primary] .aim-primary-btn-outline:focus {
  background-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

/* ==========================================================================
   OPT-IN FORM CONTROLS
   ========================================================================== */

[data-aim-primary] .aim-primary-check:checked {
  background-color: var(--aim-page-primary) !important;
  border-color: var(--aim-page-primary) !important;
}

[data-aim-primary] .aim-primary-focus:focus {
  border-color: var(--aim-page-primary) !important;
  box-shadow: 0 0 0.25rem 0.05rem color-mix(in sRGB, var(--aim-page-primary) 40%, transparent) !important;
}

/* ==========================================================================
   OPT-IN NAVIGATION
   ========================================================================== */

[data-aim-primary] .aim-primary-nav.active {
  background-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

[data-aim-primary] .aim-primary-tab.active,
[data-aim-primary] .aim-primary-tab.active:hover,
[data-aim-primary] .aim-primary-tab.active:focus {
  color: var(--aim-page-primary) !important;
  box-shadow: 0 -2px 0 var(--aim-page-primary) inset !important;
}

[data-aim-primary] .aim-primary-tab:hover:not(.active) {
  color: var(--aim-page-primary) !important;
}

/* ==========================================================================
   OPT-IN PROGRESS & BADGES
   ========================================================================== */

[data-aim-primary] .aim-primary-progress {
  background-color: var(--aim-page-primary) !important;
}

[data-aim-primary] .aim-primary-badge {
  background-color: var(--aim-page-primary) !important;
  color: var(--aim-text-on-primary) !important;
}

/* ==========================================================================
   OPT-IN LINKS
   ========================================================================== */

[data-aim-primary] .aim-primary-link {
  color: var(--aim-page-primary) !important;
}

[data-aim-primary] .aim-primary-link:hover {
  color: color-mix(in sRGB, var(--aim-page-primary) 80%, black) !important;
}

/* ==========================================================================
   OPT-IN ICON PLACEHOLDER
   Uses auto-calculated lighter/darker tones from the primary color
   ========================================================================== */

[data-aim-primary] .aim-primary-icon-bg {
  background-color: color-mix(in sRGB, var(--aim-page-primary) 15%, white) !important;
}

[data-aim-primary] .aim-primary-icon-text {
  color: color-mix(in sRGB, var(--aim-page-primary) 85%, black) !important;
}