/* ==========================================================================
   MODULE 03: KOMMUNIKATION — ACCENT COLORS
   Modul-spezifische Farbakzente innerhalb von Sprint 2 (Teal)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MIRROR QUESTION CARDS — 3 distinct icon colors
   -------------------------------------------------------------------------- */
.mirror-question-card--accent-1 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(88, 166, 255, 0.06));
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
}
.mirror-question-card--accent-1:hover {
  border-color: rgba(88, 166, 255, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(88, 166, 255, 0.08);
}
html.light-theme .mirror-question-card--accent-1:hover {
  border-color: rgba(88, 166, 255, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(88, 166, 255, 0.15) inset;
}

.mirror-question-card--accent-2 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(144, 169, 85, 0.15), rgba(144, 169, 85, 0.06));
  border-color: rgba(144, 169, 85, 0.3);
  color: var(--academy-sage);
}
.mirror-question-card--accent-2:hover {
  border-color: rgba(144, 169, 85, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(144, 169, 85, 0.08);
}
html.light-theme .mirror-question-card--accent-2:hover {
  border-color: rgba(144, 169, 85, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(144, 169, 85, 0.15) inset;
}

.mirror-question-card--accent-3 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), rgba(244, 162, 97, 0.06));
  border-color: rgba(244, 162, 97, 0.3);
  color: var(--academy-apricot);
}
.mirror-question-card--accent-3:hover {
  border-color: rgba(244, 162, 97, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(244, 162, 97, 0.08);
}
html.light-theme .mirror-question-card--accent-3:hover {
  border-color: rgba(244, 162, 97, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(244, 162, 97, 0.15) inset;
}

/* --------------------------------------------------------------------------
   2. PROCESS STEPS — 4 distinct accent colors
   -------------------------------------------------------------------------- */
.process-step--accent-1 .process-step__icon {
  color: var(--academy-teal);
  background: rgba(74, 144, 164, 0.1);
  border-color: rgba(74, 144, 164, 0.15);
}
.process-step--accent-1 .process-step__num {
  color: var(--academy-teal);
}
.process-step--accent-1:hover {
  border-color: rgba(74, 144, 164, 0.25);
}

.process-step--accent-2 .process-step__icon {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.15);
}
.process-step--accent-2 .process-step__num {
  color: #58a6ff;
}
.process-step--accent-2:hover {
  border-color: rgba(88, 166, 255, 0.25);
}

.process-step--accent-3 .process-step__icon {
  color: var(--academy-sage);
  background: rgba(144, 169, 85, 0.1);
  border-color: rgba(144, 169, 85, 0.15);
}
.process-step--accent-3 .process-step__num {
  color: var(--academy-sage);
}
.process-step--accent-3:hover {
  border-color: rgba(144, 169, 85, 0.25);
}

.process-step--accent-4 .process-step__icon {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.15);
}
.process-step--accent-4 .process-step__num {
  color: #a78bfa;
}
.process-step--accent-4:hover {
  border-color: rgba(167, 139, 250, 0.25);
}

/* Override Sprint-2 arrow colors for each step */
.process-step--accent-1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234A90A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-3::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2390a955' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. W-TIMELINE BADGES — 5 distinct colors
   -------------------------------------------------------------------------- */
.w-timeline__badge--accent-1 {
  background: linear-gradient(135deg, var(--academy-teal), #3d7a8a);
  box-shadow: 0 4px 16px rgba(74, 144, 164, 0.25);
}
.w-timeline__badge--accent-2 {
  background: linear-gradient(135deg, #58a6ff, #3b82f6);
  box-shadow: 0 4px 16px rgba(88, 166, 255, 0.25);
}
.w-timeline__badge--accent-3 {
  background: linear-gradient(135deg, var(--academy-sage), #789146);
  box-shadow: 0 4px 16px rgba(144, 169, 85, 0.25);
}
.w-timeline__badge--accent-4 {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.25);
}
.w-timeline__badge--accent-5 {
  background: linear-gradient(135deg, var(--academy-apricot), #d97706);
  box-shadow: 0 4px 16px rgba(244, 162, 97, 0.25);
}

/* --------------------------------------------------------------------------
   4. EXAMPLE CARDS — distinct header icon colors
   -------------------------------------------------------------------------- */
.example-card--accent-1 .example-header__icon {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(88, 166, 255, 0.06));
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
}
.example-card--accent-2 .example-header__icon {
  background: linear-gradient(135deg, rgba(144, 169, 85, 0.15), rgba(144, 169, 85, 0.06));
  border-color: rgba(144, 169, 85, 0.3);
  color: var(--academy-sage);
}
.example-card--accent-3 .example-header__icon {
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), rgba(244, 162, 97, 0.06));
  border-color: rgba(244, 162, 97, 0.3);
  color: var(--academy-apricot);
}

/* --------------------------------------------------------------------------
   5. RESULT ICON — module-specific accent
   -------------------------------------------------------------------------- */
.module-03-result .result-icon {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(88, 166, 255, 0.06));
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
}

/* --------------------------------------------------------------------------
   6. QUIZ CARDS — distinct number badge colors
   -------------------------------------------------------------------------- */
.quiz-card--accent-1 .quiz-number {
  background: linear-gradient(135deg, var(--academy-teal), #3d7a8a);
  box-shadow: 0 4px 16px rgba(74, 144, 164, 0.25);
  color: #fff;
}
.quiz-card--accent-2 .quiz-number {
  background: linear-gradient(135deg, #58a6ff, #3b82f6);
  box-shadow: 0 4px 16px rgba(88, 166, 255, 0.25);
  color: #fff;
}
.quiz-card--accent-3 .quiz-number {
  background: linear-gradient(135deg, var(--academy-sage), #789146);
  box-shadow: 0 4px 16px rgba(144, 169, 85, 0.25);
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. TOOL CARDS — distinct logo accent colors
   -------------------------------------------------------------------------- */
.tool-card--accent-1 .tool-logo {
  background: linear-gradient(135deg, #10a37f, #0d8c6d);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 163, 127, 0.25);
}
.tool-card--accent-2 .tool-logo {
  background: linear-gradient(135deg, #cc785c, #b5654a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(204, 120, 92, 0.25);
}
.tool-card--accent-3 .tool-logo {
  background: linear-gradient(135deg, #1e3a5f, #152a45);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
}

/* --------------------------------------------------------------------------
   8. TAKEAWAY CARDS — distinct icon colors
   -------------------------------------------------------------------------- */
.takeaway-card--accent-1 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(74, 144, 164, 0.15), rgba(74, 144, 164, 0.06));
  border-color: rgba(74, 144, 164, 0.3);
  color: var(--academy-teal);
}
.takeaway-card--accent-1:hover {
  border-color: rgba(74, 144, 164, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(74, 144, 164, 0.08);
}
html.light-theme .takeaway-card--accent-1:hover {
  border-color: rgba(74, 144, 164, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(74, 144, 164, 0.15) inset;
}

.takeaway-card--accent-2 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(88, 166, 255, 0.06));
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
}
.takeaway-card--accent-2:hover {
  border-color: rgba(88, 166, 255, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(88, 166, 255, 0.08);
}
html.light-theme .takeaway-card--accent-2:hover {
  border-color: rgba(88, 166, 255, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(88, 166, 255, 0.15) inset;
}

.takeaway-card--accent-3 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(144, 169, 85, 0.15), rgba(144, 169, 85, 0.06));
  border-color: rgba(144, 169, 85, 0.3);
  color: var(--academy-sage);
}
.takeaway-card--accent-3:hover {
  border-color: rgba(144, 169, 85, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(144, 169, 85, 0.08);
}
html.light-theme .takeaway-card--accent-3:hover {
  border-color: rgba(144, 169, 85, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(144, 169, 85, 0.15) inset;
}

/* --------------------------------------------------------------------------
   9. NEXT SECTION — accent colors for badge & features
   -------------------------------------------------------------------------- */
.module-03-next .next-badge {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.12), rgba(88, 166, 255, 0.06));
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.2);
}
.module-03-next .next-badge i {
  color: #58a6ff;
}
.module-03-next .next-feature:nth-child(1) i { color: var(--academy-teal); }
.module-03-next .next-feature:nth-child(2) i { color: #58a6ff; }
.module-03-next .next-feature:nth-child(3) i { color: var(--academy-sage); }