/* =============================================================================
   TAILWIND EXTEND - Theme-aware utility classes
   Use these instead of inline styles with var(--)
   ============================================================================= */

/* === Backgrounds === */
.bg-page { background: var(--bg-primary); }
.bg-card { background: var(--bg-card); }
.bg-elevated { background: var(--bg-elevated); }
.bg-secondary { background: var(--bg-secondary); }

/* === Text Colors === */
.text-theme-primary { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }
.text-theme-inverse { color: var(--text-inverse); }

/* === Accent Colors === */
.text-accent { color: var(--accent); }
.text-accent-hover { color: var(--accent-hover); }
.text-accent-text { color: var(--accent-text); }
.bg-accent { background: var(--accent); }
.bg-accent-hover { background: var(--accent-hover); }

/* === Semantic Colors === */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }
.bg-success { background: var(--success-bg); }
.bg-warning { background: var(--warning-bg); }
.bg-error { background: var(--error-bg); }
.bg-info { background: var(--info-bg); }

/* === Borders === */
.border-theme { border-color: var(--border-default); }
.border-theme-muted { border-color: var(--border-muted); }

/* === Combined Border Utilities === */
.border-all-theme { border: 1px solid var(--border-default); }
.border-b-theme { border-bottom: 1px solid var(--border-default); }
.border-t-theme { border-top: 1px solid var(--border-default); }
.border-l-theme { border-left: 1px solid var(--border-default); }
.border-r-theme { border-right: 1px solid var(--border-default); }

/* === Monokai Accent Colors (for dark theme icons) === */
.text-monokai-yellow { color: var(--color-monokai-yellow, #FFD866); }

/* === Shadows === */
.shadow-theme-soft { box-shadow: var(--shadow-soft); }
.shadow-theme-medium { box-shadow: var(--shadow-medium); }
.shadow-theme-glow { box-shadow: var(--shadow-glow); }

/* === Glassmorphism === */
.glass-bg { background: var(--glass-bg); }
.glass-border { border: 1px solid var(--glass-border); }
.glass-shadow { box-shadow: var(--glass-shadow); }