/* ==========================================================================
   ACSR - COLOR UTILITIES
   Complete color utility classes for ALL color system variables
   Use with foundation.css color system
   ========================================================================== */

/* ==========================================================================
   BACKGROUND COLOR UTILITIES
   ========================================================================== */

/* ========== BRAND BACKGROUNDS ========== */
.bg-primary { background-color: var(--brand-primary); }
.bg-primary-dark { background-color: var(--brand-primary-dark); }
.bg-primary-darker { background-color: var(--brand-primary-darker); }
.bg-primary-light { background-color: var(--brand-primary-light); }

.bg-accent { background-color: var(--brand-accent); }
.bg-accent-light { background-color: var(--brand-accent-light); }
.bg-accent-lighter { background-color: var(--brand-accent-lighter); }
.bg-accent-dark { background-color: var(--brand-accent-dark); }

/* ========== PRIMARY OPACITY BACKGROUNDS ========== */
.bg-primary-3 { background-color: var(--brand-primary-3); }
.bg-primary-5 { background-color: var(--brand-primary-5); }
.bg-primary-10 { background-color: var(--brand-primary-10); }
.bg-primary-15 { background-color: var(--brand-primary-15); }
.bg-primary-20 { background-color: var(--brand-primary-20); }
.bg-primary-25 { background-color: var(--brand-primary-25); }
.bg-primary-30 { background-color: var(--brand-primary-30); }
.bg-primary-40 { background-color: var(--brand-primary-40); }
.bg-primary-50 { background-color: var(--brand-primary-50); }
.bg-primary-60 { background-color: var(--brand-primary-60); }
.bg-primary-70 { background-color: var(--brand-primary-70); }
.bg-primary-80 { background-color: var(--brand-primary-80); }
.bg-primary-90 { background-color: var(--brand-primary-90); }

/* ========== ACCENT OPACITY BACKGROUNDS (MOST USED) ========== */
.bg-accent-10 { background-color: var(--brand-accent-10); } /* 240+ uses */
.bg-accent-15 { background-color: var(--brand-accent-15); }
.bg-accent-20 { background-color: var(--brand-accent-20); } /* 100+ uses */
.bg-accent-25 { background-color: var(--brand-accent-25); }
.bg-accent-30 { background-color: var(--brand-accent-30); } /* 50+ uses */
.bg-accent-40 { background-color: var(--brand-accent-40); }
.bg-accent-50 { background-color: var(--brand-accent-50); }

/* ========== SLATE BACKGROUNDS ========== */
.bg-slate-50 { background-color: var(--color-slate-50); }
.bg-slate-100 { background-color: var(--color-slate-100); }
.bg-slate-200 { background-color: var(--color-slate-200); }
.bg-slate-300 { background-color: var(--color-slate-300); }
.bg-slate-400 { background-color: var(--color-slate-400); }
.bg-slate-500 { background-color: var(--color-slate-500); }
.bg-slate-600 { background-color: var(--color-slate-600); }
.bg-slate-700 { background-color: var(--color-slate-700); }
.bg-slate-800 { background-color: var(--color-slate-800); }
.bg-slate-900 { background-color: var(--color-slate-900); }

/* ========== GRAY BACKGROUNDS ========== */
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* ========== WHITE/BLACK BACKGROUNDS ========== */
.bg-white { background-color: var(--color-white); }
.bg-off-white { background-color: var(--color-off-white); }
.bg-cream { background-color: var(--color-cream); }
.bg-mint-white { background-color: var(--color-mint-white); }
.bg-black { background-color: var(--color-black); }
.bg-near-black { background-color: var(--color-near-black); }

/* ========== WHITE OVERLAY BACKGROUNDS ========== */
.bg-white-5 { background-color: var(--white-5); }
.bg-white-10 { background-color: var(--white-10); }
.bg-white-15 { background-color: var(--white-15); }
.bg-white-20 { background-color: var(--white-20); }
.bg-white-30 { background-color: var(--white-30); }
.bg-white-40 { background-color: var(--white-40); }
.bg-white-50 { background-color: var(--white-50); }
.bg-white-60 { background-color: var(--white-60); }
.bg-white-80 { background-color: var(--white-80); }
.bg-white-90 { background-color: var(--white-90); }
.bg-white-95 { background-color: var(--white-95); }
.bg-white-98 { background-color: var(--white-98); }

/* ========== BLACK OVERLAY BACKGROUNDS ========== */
.bg-black-3 { background-color: var(--black-3); }
.bg-black-5 { background-color: var(--black-5); }
.bg-black-8 { background-color: var(--black-8); }
.bg-black-10 { background-color: var(--black-10); }
.bg-black-15 { background-color: var(--black-15); }
.bg-black-20 { background-color: var(--black-20); }
.bg-black-30 { background-color: var(--black-30); }
.bg-black-50 { background-color: var(--black-50); }
.bg-black-80 { background-color: var(--black-80); }
.bg-black-90 { background-color: var(--black-90); }

/* ========== STATE BACKGROUNDS ========== */
.bg-success { background-color: var(--color-success); }
.bg-success-dark { background-color: var(--color-success-dark); }
.bg-error { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-warning); }
.bg-warning-gold { background-color: var(--color-warning-gold); }
.bg-info { background-color: var(--color-info); }

/* ==========================================================================
   TEXT COLOR UTILITIES
   ========================================================================== */

/* ========== BRAND TEXT COLORS ========== */
.text-primary { color: var(--brand-primary); }
.text-primary-dark { color: var(--brand-primary-dark); }
.text-primary-darker { color: var(--brand-primary-darker); }
.text-primary-light { color: var(--brand-primary-light); }

.text-accent { color: var(--brand-accent); }
.text-accent-light { color: var(--brand-accent-light); }
.text-accent-lighter { color: var(--brand-accent-lighter); }
.text-accent-dark { color: var(--brand-accent-dark); }

/* ========== SLATE TEXT COLORS ========== */
.text-slate-50 { color: var(--color-slate-50); }
.text-slate-100 { color: var(--color-slate-100); }
.text-slate-200 { color: var(--color-slate-200); }
.text-slate-300 { color: var(--color-slate-300); }
.text-slate-400 { color: var(--color-slate-400); }
.text-slate-500 { color: var(--color-slate-500); } /* Main text */
.text-slate-600 { color: var(--color-slate-600); }
.text-slate-700 { color: var(--color-slate-700); }
.text-slate-800 { color: var(--color-slate-800); }
.text-slate-900 { color: var(--color-slate-900); }

/* ========== GRAY TEXT COLORS ========== */
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-900 { color: var(--color-gray-900); }

/* ========== WHITE/BLACK TEXT ========== */
.text-white { color: var(--color-white); }
.text-off-white { color: var(--color-off-white); }
.text-black { color: var(--color-black); }
.text-near-black { color: var(--color-near-black); }

/* ========== STATE TEXT COLORS ========== */
.text-success { color: var(--color-success); }
.text-success-dark { color: var(--color-success-dark); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-warning-gold { color: var(--color-warning-gold); }
.text-info { color: var(--color-info); }

/* ========== SEMANTIC TEXT (Recommended) ========== */
.text-heading { color: var(--text-heading); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-dark { color: var(--text-dark); }

/* ==========================================================================
   BORDER COLOR UTILITIES
   ========================================================================== */

/* ========== BRAND BORDERS ========== */
.border-primary { border-color: var(--brand-primary); }
.border-primary-dark { border-color: var(--brand-primary-dark); }
.border-accent { border-color: var(--brand-accent); }
.border-accent-light { border-color: var(--brand-accent-light); }

/* ========== SLATE BORDERS ========== */
.border-slate-50 { border-color: var(--color-slate-50); }
.border-slate-100 { border-color: var(--color-slate-100); }
.border-slate-200 { border-color: var(--color-slate-200); } /* Most used */
.border-slate-300 { border-color: var(--color-slate-300); }
.border-slate-400 { border-color: var(--color-slate-400); }
.border-slate-500 { border-color: var(--color-slate-500); }
.border-slate-600 { border-color: var(--color-slate-600); }
.border-slate-700 { border-color: var(--color-slate-700); }
.border-slate-800 { border-color: var(--color-slate-800); }
.border-slate-900 { border-color: var(--color-slate-900); }

/* ========== GRAY BORDERS ========== */
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }

/* ========== OPACITY BORDERS ========== */
.border-primary-10 { border-color: var(--brand-primary-10); }
.border-primary-20 { border-color: var(--brand-primary-20); }
.border-accent-10 { border-color: var(--brand-accent-10); }
.border-accent-20 { border-color: var(--brand-accent-20); }
.border-white-10 { border-color: var(--white-10); }
.border-white-20 { border-color: var(--white-20); }
.border-white-30 { border-color: var(--white-30); }
.border-black-10 { border-color: var(--black-10); }
.border-black-15 { border-color: var(--black-15); }

/* ========== SEMANTIC BORDERS (Recommended) ========== */
.border-light { border-color: var(--border-light); }
.border-default { border-color: var(--border-default); }
.border-dark { border-color: var(--border-dark); }

/* ==========================================================================
   GRADIENT BACKGROUND UTILITIES
   ========================================================================== */

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-primary-accent {
    background: var(--gradient-primary-accent);
}

.bg-gradient-primary-light {
    background: var(--gradient-primary-light);
}

.bg-gradient-accent {
    background: var(--gradient-accent);
}

.bg-gradient-accent-secondary {
    background: var(--gradient-accent-secondary);
}

.bg-gradient-success {
    background: var(--gradient-success);
}

/* ========== SPECIFIC GRADIENT PATTERNS (From Audit) ========== */
.bg-gradient-primary-card {
    background: linear-gradient(135deg, #35645a 0%, var(--brand-accent) 100%);
    padding: 3.5rem 2.5rem;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.bg-gradient-hero {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: white;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bg-gradient-section {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.bg-gradient-light-section {
    background: linear-gradient(135deg, var(--brand-primary-5), var(--brand-accent-10));
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

/* ==========================================================================
   COMBINED COLOR + UTILITY PATTERNS (Common Combinations)
   ========================================================================== */

/* Text + Background Combinations */
.bg-primary-text-white {
    background-color: var(--brand-primary);
    color: var(--color-white);
}

.bg-accent-text-white {
    background-color: var(--brand-accent);
    color: var(--color-white);
}

.bg-white-text-primary {
    background-color: var(--color-white);
    color: var(--brand-primary);
}

.bg-slate-50-text-slate-500 {
    background-color: var(--color-slate-50);
    color: var(--color-slate-500);
}

/* Border + Background Combinations */
.bg-white-border-slate-200 {
    background-color: var(--color-white);
    border-color: var(--color-slate-200);
}

.bg-accent-10-border-accent-20 {
    background-color: var(--brand-accent-10);
    border-color: var(--brand-accent-20);
}

.bg-white-border-accent {
    background-color: var(--color-white);
    border-color: var(--brand-accent);
}

/* ==========================================================================
   COLOR UTILITY HELPERS
   ========================================================================== */

/* Transparent */
.bg-transparent { background-color: transparent; }
.text-transparent { color: transparent; }
.border-transparent { border-color: transparent; }

/* Current Color */
.text-current { color: currentColor; }
.border-current { border-color: currentColor; }

/* Inherit */
.bg-inherit { background-color: inherit; }
.text-inherit { color: inherit; }
.border-inherit { border-color: inherit; }

/* ==========================================================================
   LEGACY COLOR ALIASES (DO NOT REMOVE - Used in existing code)
   ========================================================================== */

.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-dark { background-color: var(--bg-dark); }
.bg-light { background-color: var(--bg-light); }