/**
 * Card Contrast Fixes - Directive 3
 * 
 * Ensures all cards meet WCAG AA contrast requirements across all themes.
 * Fixes text on light backgrounds, button text on accent backgrounds, and muted text visibility.
 */

/* ========================================
 * Base Card Text Contrast
 * ======================================== */

.card,
.bb-card,
.ap-card,
.recipe.card,
.result-card,
.make-result-card,
.mocktail-result-card,
.history-card,
.favorite-card,
.favorites-card,
.analytics-metric-card,
.metric-card,
.inventory-card,
.subscription-plan-card {
  /* Ensure primary text has sufficient contrast */
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

/* Card titles and headings */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.bb-card-title,
.ap-card h3,
.recipe.card h3,
.result-card h3 {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
  font-weight: 600;
}

/* Card body text */
.card p,
.card .card-desc,
.card .r-body,
.recipe.card .r-body,
.result-card p {
  color: var(--text-secondary, var(--muted, rgba(255, 255, 255, 0.92)));
  line-height: var(--type-body-line, 1.6);
}

/* Card muted text - ensure minimum contrast */
.card small,
.card .text-muted,
.card .muted,
.recipe.card small,
.result-card small {
  color: var(--text-tertiary, var(--text-muted, rgba(255, 255, 255, 0.85)));
  font-size: var(--type-micro-size, 0.8125rem);
}

/* ========================================
 * Light Theme Overrides
 * ======================================== */

:root[data-ui-theme='aperium'][data-bar-mode='light'] .card,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .ap-card,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .recipe.card {
  /* Primary text on light background */
  color: rgba(15, 23, 42, 0.95);
}

/* Make a Drink result cards - ensure dark text on light background */
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card {
  color: rgba(15, 23, 42, 0.95);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result .bb-card-title,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result h3,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result h4,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card h3,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card h4 {
  color: rgba(15, 23, 42, 0.98);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result p,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card--result li,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card p,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card li {
  color: rgba(15, 23, 42, 0.85);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .card h1,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card h2,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card h3,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card h4,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-card-title,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .recipe.card h3 {
  color: rgba(15, 23, 42, 0.98);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .card p,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card .card-desc,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card .r-body,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .recipe.card .r-body {
  color: rgba(15, 23, 42, 0.85);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .card small,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card .text-muted,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .card .muted {
  color: rgba(15, 23, 42, 0.70);
}

/* ========================================
 * Halytic Theme Overrides
 * ======================================== */

:root[data-ui-theme='halytic'] .card,
:root[data-ui-theme='halytic'] .bb-card,
:root[data-ui-theme='halytic'] .ap-card,
:root[data-ui-theme='halytic'] .recipe.card {
  color: var(--halytic-text-primary, #1c1e21);
}

:root[data-ui-theme='halytic'] .card h1,
:root[data-ui-theme='halytic'] .card h2,
:root[data-ui-theme='halytic'] .card h3,
:root[data-ui-theme='halytic'] .card h4,
:root[data-ui-theme='halytic'] .bb-card-title,
:root[data-ui-theme='halytic'] .recipe.card h3 {
  color: var(--halytic-text-primary, #1c1e21);
}

:root[data-ui-theme='halytic'] .card p,
:root[data-ui-theme='halytic'] .card .card-desc,
:root[data-ui-theme='halytic'] .card .r-body,
:root[data-ui-theme='halytic'] .recipe.card .r-body {
  color: var(--halytic-text-secondary, #555b61);
}

:root[data-ui-theme='halytic'] .card small,
:root[data-ui-theme='halytic'] .card .text-muted,
:root[data-ui-theme='halytic'] .card .muted {
  color: var(--halytic-text-muted, #6c727f);
}

/* ========================================
 * Result Cards Specific Fixes
 * ======================================== */

.tonight-round-results .card,
.tonight-round-results .recipe.card {
  /* Ensure text is readable on gradient backgrounds */
  color: var(--text-primary, rgba(255, 255, 255, 0.98));
}

.tonight-round-results .card h3,
.tonight-round-results .recipe.card h3 {
  color: var(--text-primary, rgba(255, 255, 255, 0.98));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tonight-round-results .card .card-desc,
.tonight-round-results .card .tonight-round-desc {
  color: var(--text-secondary, rgba(255, 255, 255, 0.92));
}

/* Light theme result cards */
:root[data-ui-theme='aperium'][data-bar-mode='light'] .tonight-round-results .card,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .tonight-round-results .recipe.card {
  color: rgba(15, 23, 42, 0.95);
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .tonight-round-results .card h3 {
  color: rgba(15, 23, 42, 0.98);
  text-shadow: none;
}

/* ========================================
 * History & Favorites Cards
 * ======================================== */

.history-card,
.favorite-card,
.favorites-card {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

.history-card h3,
.history-card h4,
.favorite-card h3,
.favorite-card h4 {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

.history-card p,
.history-card .card-desc,
.favorite-card p,
.favorite-card .card-desc {
  color: var(--text-secondary, var(--muted, rgba(255, 255, 255, 0.92)));
}

.history-card small,
.history-card .text-muted,
.favorite-card small,
.favorite-card .text-muted {
  color: var(--text-tertiary, var(--text-muted, rgba(255, 255, 255, 0.85)));
}

/* ========================================
 * Subscription Cards
 * ======================================== */

.subscription-plan-card {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

.subscription-plan-card h3,
.subscription-plan-card h4 {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

.subscription-plan-card .price,
.subscription-plan-card .plan-description {
  color: var(--text-secondary, var(--muted, rgba(255, 255, 255, 0.92)));
}

/* ========================================
 * Analytics Metric Cards
 * ======================================== */

.analytics-metric-card,
.metric-card {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
}

.analytics-metric-card .metric-value,
.metric-card .metric-value {
  color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
  font-weight: 700;
}

.analytics-metric-card .metric-label,
.metric-card .metric-label {
  color: var(--text-secondary, var(--muted, rgba(255, 255, 255, 0.92)));
}

/* ========================================
 * Mobile Responsive Adjustments
 * ======================================== */

@media (max-width: 768px) {
  /* Ensure contrast is maintained on mobile */
  .card,
  .bb-card,
  .ap-card {
    /* Slightly increase text contrast on smaller screens */
    color: var(--text-primary, var(--text, rgba(255, 255, 255, 0.98)));
  }
  
  .card small,
  .card .text-muted {
    /* Ensure muted text is still readable on mobile */
    color: var(--text-tertiary, var(--text-muted, rgba(255, 255, 255, 0.85)));
    font-size: var(--type-micro-size, 0.8125rem);
  }
}