/**
 * Macrition Color Contrast Fix Patch
 * ============================================================
 * Fixes all 22 WCAG AA contrast violations identified in audit-4-contrast.
 *
 * Issues fixed:
 * 1..badge-new, white text on #22C55E → 2.28:1 → dark text:1
 * 2..btn-accent, white on green gradient → 2.28-3.30:1 → dark text
 * 3..btn-sage, same as btn-accent
 * 4..tool-card.icon.mustard, white SVG on amber → 2.15:1 → dark stroke
 * 5..nutrition-pill.carbs, amber text on light amber → 2.07:1 → dark amber
 * 6..badge.warn, amber on amber tint → 2.07:1 → dark amber
 * 7..glass-badge.warm, amber on amber tint → 1.86:1 → dark amber
 * 8..cat-header.cat-icon.mustard, amber on amber tint → dark amber
 * 9..cat-header.cat-icon.indigo, BUG: green text on indigo bg → indigo text
 * 10..eng-status.warn (admin), amber on amber → dark amber
 * 11..eng-btn.warn (admin), amber on amber → dark amber
 * 12..eng-btn.primary (admin), white on light blue gradient → darker blue
 * 13..btn-primary:active /.btn-accent:active, remove -l gradient stop
 * 14..chip.sage /.chip.accent, green on light green 3.15:1 → dark green
 * 15..chip.berry /.chip.rose, rose on light rose 3.34:1 → dark rose
 * 16..badge.bad /.nutrition-pill.fat /.glass-badge.danger, rose on rose → dark rose
 * 17..chip.terracotta (dark mode) → too bright text tone down
 * 18..chip.mustard (dark mode) → too bright
 * 19..chip.berry (dark mode) → just below AA threshold
 * 20..premium-badge.badge-pro (dark mode) → 2.00:1 → brighten text
 * 21..premium-badge.badge-premium (dark mode) → 1.70:1 → brighten text
 * 22..footer-brand p /.footer-bottom, muted gray on dark → 3.75:1 → lighter gray
 *
 * Strategy:
 * - Same-hue-text-on-same-hue-tinted-background is the root cause.
 * Fix by darkening the text hue to its -d variant (e.g. amber → #92400E).
 * - For bright accent backgrounds (#22C55E, #F59E0B, light gradients) paired
 * with white text, swap to dark text.
 * - For dark mode, override chip text colors with brighter variants.
 *
 * This file is APPENDED to design-system.css (after all existing rules).
 * Late-loading CSS rules win the cascade for equal specificity.
 * Use:where() / [data-theme] overrides where needed for dark mode.
 */

/* ============================================================
 * 1. Bright-accent chips with text → dark text variant (AA pass)
 * ============================================================ */

/* Chip.sage/accent: green text on light green → dark green (was 3.15:1) */
.chip.sage,
.chip.accent {
  color: var(--accent-d);
  font-weight: 600;
}

/* Chip.berry/rose: rose text on light rose → darker rose (was 3.34:1) */
.chip.berry,
.chip.rose {
  color: #BE123C;  /* rose-700, contrast 5.49:1 on rose-50 */
  font-weight: 600;
}

/* Chip.terracotta: keep primary-d, already passes */
.chip.terracotta,
.chip.primary {
  color: var(--primary-d);
  font-weight: 600;
}

/* ============================================================
 * 2. Bright accent buttons → dark text variant
 * ============================================================ */

/*.btn-accent: was white on green gradient (2.28:1), now dark green text */
.btn-accent {
  color: #052E16;  /* accent-950, contrast >10:1 on accent gradient */
  font-weight: 700;
}
.btn-accent:hover {
  color: #052E16;
}

/*.btn-sage: same as btn-accent */
.btn-sage {
  color: #052E16;
  font-weight: 700;
}
.btn-sage:hover {
  color: #052E16;
}

/*.btn-primary: keep white text but ensure background gradient is the -d/-md variant
   (no -l light stop) so contrast stays ≥ 4.5:1 across the gradient */
.btn-primary {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  color: #FFFFFF;
}
.btn-primary:active {
  background-image: linear-gradient(135deg, var(--primary-d) 0%, var(--primary-d) 100%);
}
.btn-accent:active {
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
}

/* ============================================================
 * 3. Badge-new, was white text on #22C55E (2.28:1) → dark text
 * ============================================================ */
.badge-new {
  color: #052E16;
  font-weight: 700;
}

/* ============================================================
 * 4. Tool card icons, bright accent backgrounds with white SVG stroke
 * ============================================================ */
.tool-card .icon.mustard,
.tool-card .icon.amber {
  color: #92400E;  /* amber-800, contrast 6.84:1 on amber-50 */
}
.tool-card .icon.sage,
.tool-card .icon.accent {
  color: var(--accent-d);
}
.tool-card .icon.berry,
.tool-card .icon.rose {
  color: #BE123C;
}
.tool-card .icon.terracotta,
.tool-card .icon.primary {
  color: var(--primary-d);
}

/* ============================================================
 * 5. Nutrition pills (food search result cards)
 * ============================================================ */
.food-result-card .nutrition-pill.carbs {
  background: #FFFBEB;
  color: #92400E;  /* was amber on amber, 2.07:1 → now 6.84:1 */
}
.food-result-card .nutrition-pill.fat {
  background: #FFF1F2;
  color: #BE123C;  /* was rose on rose, 2.89:1 → now 5.49:1 */
}
.food-result-card .nutrition-pill.protein {
  background: #F0FDF4;
  color: var(--accent-d);
}

/* ============================================================
 * 6. Badges (admin)
 * ============================================================ */
.badge.warn {
  background: #FFFBEB;
  color: #92400E;  /* was amber on amber, 2.07:1 → now 6.84:1 */
  font-weight: 600;
}
.badge.bad {
  background: #FFF1F2;
  color: #BE123C;
  font-weight: 600;
}

/* ============================================================
 * 7. Glass badges (premium feature cards)
 * ============================================================ */
.glass-badge.warm {
  background: rgba(245, 158, 11, 0.15);
  color: #92400E;  /* was amber on amber, 1.86:1 → now 5.96:1 */
  border-color: rgba(146, 64, 14, 0.3);
}
.glass-badge.danger {
  background: rgba(190, 18, 60, 0.12);
  color: #BE123C;
  border-color: rgba(190, 18, 60, 0.3);
}
.glass-badge.success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--accent-d);
  border-color: rgba(22, 163, 74, 0.3);
}

/* ============================================================
 * 8. Category header icons, fix mustard AND fix the indigo/green bug
 * ============================================================ */
.cat-header .cat-icon.mustard {
  background: #FFFBEB;
  color: #92400E;
}
.cat-header .cat-icon.indigo {
  /* BUG: previously #16A34A (green) text on indigo bg, 2.95:1.
     Fix: use indigo-700 dark text on indigo-50 background */
  background: #EEF2FF;
  color: #4338CA;  /* indigo-700, contrast 7.93:1 on indigo-50 */
}
.cat-header .cat-icon.berry {
  background: #FFF1F2;
  color: #BE123C;
}
.cat-header .cat-icon.sage,
.cat-header .cat-icon.accent {
  background: #F0FDF4;
  color: var(--accent-d);
}
.cat-header .cat-icon.terracotta,
.cat-header .cat-icon.primary {
  background: var(--primary-50);
  color: var(--primary-d);
}

/* ============================================================
 * 9. Footer brand text, muted gray on dark footer (was 3.75:1)
 * ============================================================ */
.footer-brand p,
.footer-bottom {
  color: #94A3B8;  /* slate-400, contrast 5.79:1 on #0F172A */
}

/* ============================================================
 * 10. Dark mode overrides, chip text colors need to brighten
 * ============================================================ */
[data-theme="dark"] .chip.terracotta,
[data-theme="dark"] .chip.primary {
  background: rgba(37, 99, 235, 0.18);
  color: #93C5FD;  /* primary-300, contrast 7.4:1 on dark bg */
}
[data-theme="dark"] .chip.sage,
[data-theme="dark"] .chip.accent {
  background: rgba(22, 163, 74, 0.18);
  color: #86EFAC;  /* accent-300, contrast 9.8:1 on dark bg */
}
[data-theme="dark"] .chip.mustard,
[data-theme="dark"] .chip.amber {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;  /* amber-300, contrast:1 on dark bg */
}
[data-theme="dark"] .chip.berry,
[data-theme="dark"] .chip.rose {
  background: rgba(244, 63, 94, 0.18);
  color: #FDA4AF;  /* rose-300, contrast 6.8:1 on dark bg */
}

/* Dark mode: tool card icons need brighter stroke */
/* (v8.20.2) dark mode: soft washes, slightly stronger for visibility on
   dark surfaces - the icons carry their own colors. */
[data-theme="dark"] .tool-card .icon.mustard,
[data-theme="dark"] .tool-card .icon.amber {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.24);
}
[data-theme="dark"] .tool-card .icon.sage,
[data-theme="dark"] .tool-card .icon.accent {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.26);
}
[data-theme="dark"] .tool-card .icon.berry,
[data-theme="dark"] .tool-card .icon.rose {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.22);
}
[data-theme="dark"] .tool-card .icon.terracotta,
[data-theme="dark"] .tool-card .icon.primary {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.26);
}

/* Dark mode: cat-header icons */
[data-theme="dark"] .cat-header .cat-icon.mustard {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
}
[data-theme="dark"] .cat-header .cat-icon.indigo {
  background: rgba(67, 56, 202, 0.18);
  color: #A5B4FC;
}
[data-theme="dark"] .cat-header .cat-icon.berry {
  background: rgba(244, 63, 94, 0.18);
  color: #FDA4AF;
}

/* Dark mode: glass-badge variants */
[data-theme="dark"] .glass-badge.warm {
  background: rgba(245, 158, 11, 0.25);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.4);
}
[data-theme="dark"] .glass-badge.danger {
  background: rgba(244, 63, 94, 0.25);
  color: #FDA4AF;
  border-color: rgba(253, 164, 175, 0.4);
}
[data-theme="dark"] .glass-badge.success {
  background: rgba(22, 163, 74, 0.25);
  color: #86EFAC;
  border-color: rgba(134, 239, 172, 0.4);
}

/* Dark mode: nutrition pills */
[data-theme="dark"] .food-result-card .nutrition-pill.carbs {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
}
[data-theme="dark"] .food-result-card .nutrition-pill.fat {
  background: rgba(244, 63, 94, 0.18);
  color: #FDA4AF;
}
[data-theme="dark"] .food-result-card .nutrition-pill.protein {
  background: rgba(22, 163, 74, 0.18);
  color: #86EFAC;
}

/* Dark mode: premium badges (was 2.00:1 / 1.70:1) */
[data-theme="dark"] .premium-badge.badge-pro {
  background: rgba(124, 58, 237, 0.25);
  color: #C4B5FD;  /* violet-300, contrast 7.0:1 on dark bg */
  border-color: rgba(196, 181, 253, 0.4);
}
[data-theme="dark"] .premium-badge.badge-premium {
  background: rgba(245, 158, 11, 0.25);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.4);
}

/* Dark mode: admin badges */
[data-theme="dark"] .badge.warn {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
}
[data-theme="dark"] .badge.bad {
  background: rgba(244, 63, 94, 0.2);
  color: #FDA4AF;
}

/* ============================================================
 * 11. Admin engine.css fixes (eng-status, eng-btn)
 * (Imported separately; these are overrides for tokens
 * the admin pages use.)
 * ============================================================ */
.eng-status.warn,
.eng-btn.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #92400E;  /* was amber on amber, 1.86:1 → now 5.96:1 */
  font-weight: 600;
}
.eng-status.danger,
.eng-btn.danger {
  background: rgba(244, 63, 94, 0.12);
  color: #BE123C;
  font-weight: 600;
}
.eng-btn.primary {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  color: #FFFFFF;
}
[data-theme="dark"] .eng-status.warn,
[data-theme="dark"] .eng-btn.warn {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
}

/* ============================================================
 * 12. Hero stat banner on homepage, fix muted text on light bg
 * ============================================================ */
.stat-banner .lbl,
.glass-stat .lbl {
  color: var(--text-2);
  font-weight: 500;
}

/* Dark mode hero stat label */
[data-theme="dark"] .stat-banner .lbl,
[data-theme="dark"] .glass-stat .lbl {
  color: #CBD5E1;  /* slate-300, contrast 9.4:1 on dark bg */
}