/* ============================================
   SEMANTIC THEME CLASSES
   ============================================

   These classes provide theme-aware styling using the .dark parent class.
   Instead of: darkMode ? 'text-gray-400' : 'text-gray-600'
   Use: className="text-secondary"

   This eliminates ~2,600 darkMode ternaries across the codebase.
   ============================================ */

/* ============================================
   TEXT COLORS
   ============================================ */

/* Primary text - main content */
.text-theme-primary {
    color: #111827; /* gray-900 */
}
.dark .text-theme-primary {
    color: #f3f4f6; /* gray-100 */
}

/* Secondary text - less prominent content */
.text-theme-secondary {
    color: #4b5563; /* gray-600 */
}
.dark .text-theme-secondary {
    color: #9ca3af; /* gray-400 */
}

/* Tertiary text - subtle/muted content */
.text-theme-tertiary {
    color: #6b7280; /* gray-500 */
}
.dark .text-theme-tertiary {
    color: #6b7280; /* gray-500 */
}

/* Muted text - labels, placeholders */
.text-theme-muted {
    color: #9ca3af; /* gray-400 */
}
.dark .text-theme-muted {
    color: #6b7280; /* gray-500 */
}

/* Heading text */
.text-theme-heading {
    color: #1f2937; /* gray-800 */
}
.dark .text-theme-heading {
    color: #e5e7eb; /* gray-200 */
}

/* Label text */
.text-theme-label {
    color: #374151; /* gray-700 */
}
.dark .text-theme-label {
    color: #d1d5db; /* gray-300 */
}

/* Inverse/contrast text */
.text-theme-inverse {
    color: #111827; /* gray-900 */
}
.dark .text-theme-inverse {
    color: #ffffff;
}

/* Link text */
.text-theme-link {
    color: #2563eb; /* blue-600 */
}
.dark .text-theme-link {
    color: #60a5fa; /* blue-400 */
}

.text-theme-link:hover {
    color: #1d4ed8; /* blue-700 */
}
.dark .text-theme-link:hover {
    color: #93c5fd; /* blue-300 */
}

/* Success text */
.text-theme-success {
    color: #16a34a; /* green-600 */
}
.dark .text-theme-success {
    color: #4ade80; /* green-400 */
}

/* Error/danger text */
.text-theme-error {
    color: #dc2626; /* red-600 */
}
.dark .text-theme-error {
    color: #f87171; /* red-400 */
}

/* Warning text */
.text-theme-warning {
    color: #ca8a04; /* yellow-600 */
}
.dark .text-theme-warning {
    color: #facc15; /* yellow-400 */
}

/* Accent/highlight text */
.text-theme-accent {
    color: #4f46e5; /* indigo-600 */
}
.dark .text-theme-accent {
    color: #818cf8; /* indigo-400 */
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */

/* Primary background - main surfaces */
.bg-theme-primary {
    background-color: #ffffff;
}
.dark .bg-theme-primary {
    background-color: #1e293b; /* slate-800 */
}

/* Secondary background - cards, panels */
.bg-theme-secondary {
    background-color: #f9fafb; /* gray-50 */
}
.dark .bg-theme-secondary {
    background-color: #334155; /* slate-700 */
}

/* Tertiary background - nested elements */
.bg-theme-tertiary {
    background-color: #f3f4f6; /* gray-100 */
}
.dark .bg-theme-tertiary {
    background-color: #475569; /* slate-600 */
}

/* Hover background for interactive elements */
.bg-theme-hover {
    background-color: transparent;
}
.bg-theme-hover:hover {
    background-color: #f3f4f6; /* gray-100 */
}
.dark .bg-theme-hover:hover {
    background-color: #334155; /* slate-700 */
}

/* Card background */
.bg-theme-card {
    background-color: #ffffff;
}
.dark .bg-theme-card {
    background-color: #1e293b; /* slate-800 */
}

/* Elevated/modal background */
.bg-theme-elevated {
    background-color: #ffffff;
}
.dark .bg-theme-elevated {
    background-color: #0f172a; /* slate-900 */
}

/* Input background */
.bg-theme-input {
    background-color: #ffffff;
}
.dark .bg-theme-input {
    background-color: #334155; /* slate-700 */
}

/* Muted/subtle background */
.bg-theme-muted {
    background-color: #f3f4f6; /* gray-100 */
}
.dark .bg-theme-muted {
    background-color: rgba(51, 65, 85, 0.5); /* slate-700/50 */
}

/* Success background */
.bg-theme-success-subtle {
    background-color: #dcfce7; /* green-100 */
}
.dark .bg-theme-success-subtle {
    background-color: rgba(34, 197, 94, 0.2); /* green-500/20 */
}

/* Error background */
.bg-theme-error-subtle {
    background-color: #fee2e2; /* red-100 */
}
.dark .bg-theme-error-subtle {
    background-color: rgba(239, 68, 68, 0.2); /* red-500/20 */
}

/* Warning background */
.bg-theme-warning-subtle {
    background-color: #fef3c7; /* amber-100 */
}
.dark .bg-theme-warning-subtle {
    background-color: rgba(245, 158, 11, 0.2); /* amber-500/20 */
}

/* ============================================
   BORDER COLORS
   ============================================ */

/* Primary border */
.border-theme-primary {
    border-color: #e5e7eb; /* gray-200 */
}
.dark .border-theme-primary {
    border-color: #334155; /* slate-700 */
}

/* Secondary border */
.border-theme-secondary {
    border-color: #d1d5db; /* gray-300 */
}
.dark .border-theme-secondary {
    border-color: #475569; /* slate-600 */
}

/* Input border */
.border-theme-input {
    border-color: #d1d5db; /* gray-300 */
}
.dark .border-theme-input {
    border-color: #475569; /* slate-600 */
}

/* Focus border */
.border-theme-focus:focus {
    border-color: #3b82f6; /* blue-500 */
}
.dark .border-theme-focus:focus {
    border-color: #60a5fa; /* blue-400 */
}

/* Divider */
.border-theme-divider {
    border-color: #f3f4f6; /* gray-100 */
}
.dark .border-theme-divider {
    border-color: #1e293b; /* slate-800 */
}

/* ============================================
   COMBINED COMPONENT CLASSES
   ============================================ */

/* Card component */
.card-theme {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}
.dark .card-theme {
    background-color: #1e293b;
    border-color: #334155;
}

/* Input component */
.input-theme {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
}
.dark .input-theme {
    background-color: #334155;
    border-color: #475569;
    color: #e5e7eb;
}

.input-theme::placeholder {
    color: #9ca3af;
}
.dark .input-theme::placeholder {
    color: #6b7280;
}

.input-theme:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dark .input-theme:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Select component */
.select-theme {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
}
.dark .select-theme {
    background-color: #334155;
    border-color: #475569;
    color: #e5e7eb;
}

/* Button - Primary */
.btn-theme-primary {
    background-color: #3b82f6;
    color: #ffffff;
}
.btn-theme-primary:hover {
    background-color: #2563eb;
}
.dark .btn-theme-primary {
    background-color: #2563eb;
}
.dark .btn-theme-primary:hover {
    background-color: #1d4ed8;
}

/* Button - Secondary */
.btn-theme-secondary {
    background-color: #e5e7eb;
    color: #374151;
}
.btn-theme-secondary:hover {
    background-color: #d1d5db;
}
.dark .btn-theme-secondary {
    background-color: #475569;
    color: #e5e7eb;
}
.dark .btn-theme-secondary:hover {
    background-color: #334155;
}

/* Button - Ghost/Subtle */
.btn-theme-ghost {
    background-color: transparent;
    color: #4b5563;
}
.btn-theme-ghost:hover {
    background-color: #f3f4f6;
}
.dark .btn-theme-ghost {
    color: #9ca3af;
}
.dark .btn-theme-ghost:hover {
    background-color: #334155;
}

/* Button - Danger */
.btn-theme-danger {
    background-color: #ef4444;
    color: #ffffff;
}
.btn-theme-danger:hover {
    background-color: #dc2626;
}
.dark .btn-theme-danger {
    background-color: #dc2626;
}
.dark .btn-theme-danger:hover {
    background-color: #b91c1c;
}

/* Icon button */
.icon-btn-theme {
    color: #6b7280;
}
.icon-btn-theme:hover {
    color: #3b82f6;
    background-color: #f3f4f6;
}
.dark .icon-btn-theme {
    color: #6b7280;
}
.dark .icon-btn-theme:hover {
    color: #60a5fa;
    background-color: #334155;
}

/* Icon button - danger variant */
.icon-btn-theme-danger:hover {
    color: #ef4444;
    background-color: #fef2f2;
}
.dark .icon-btn-theme-danger:hover {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Dropdown/menu */
.dropdown-theme {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.dark .dropdown-theme {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Dropdown item */
.dropdown-item-theme {
    color: #374151;
}
.dropdown-item-theme:hover {
    background-color: #f3f4f6;
}
.dark .dropdown-item-theme {
    color: #d1d5db;
}
.dark .dropdown-item-theme:hover {
    background-color: #334155;
}

/* Modal overlay */
.modal-overlay-theme {
    background-color: rgba(0, 0, 0, 0.5);
}
.dark .modal-overlay-theme {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Modal content */
.modal-content-theme {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}
.dark .modal-content-theme {
    background-color: #1e293b;
    border-color: #334155;
}

/* Table header */
.table-header-theme {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.dark .table-header-theme {
    background-color: #334155;
    border-bottom-color: #475569;
}

/* Table row */
.table-row-theme {
    border-bottom: 1px solid #f3f4f6;
}
.table-row-theme:hover {
    background-color: #f9fafb;
}
.dark .table-row-theme {
    border-bottom-color: #1e293b;
}
.dark .table-row-theme:hover {
    background-color: rgba(51, 65, 85, 0.5);
}

/* Sidebar */
.sidebar-theme {
    background-color: #ffffff;
    border-right: 1px solid #e5e7eb;
}
.dark .sidebar-theme {
    background-color: #0f172a;
    border-right-color: #1e293b;
}

/* Header */
.header-theme {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}
.dark .header-theme {
    background-color: #0f172a;
    border-bottom-color: #1e293b;
}

/* Badge - default */
.badge-theme {
    background-color: #f3f4f6;
    color: #374151;
}
.dark .badge-theme {
    background-color: #334155;
    color: #d1d5db;
}

/* Badge - primary/blue */
.badge-theme-primary {
    background-color: #dbeafe;
    color: #1e40af;
}
.dark .badge-theme-primary {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Badge - success/green */
.badge-theme-success {
    background-color: #dcfce7;
    color: #15803d;
}
.dark .badge-theme-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Badge - warning/amber */
.badge-theme-warning {
    background-color: #fef3c7;
    color: #92400e;
}
.dark .badge-theme-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

/* Badge - error/red */
.badge-theme-error {
    background-color: #fee2e2;
    color: #991b1b;
}
.dark .badge-theme-error {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Badge - purple */
.badge-theme-purple {
    background-color: #f3e8ff;
    color: #6b21a8;
}
.dark .badge-theme-purple {
    background-color: rgba(168, 85, 247, 0.2);
    color: #c4b5fd;
}

/* Toggle switch - off state */
.toggle-off-theme {
    background-color: #d1d5db; /* gray-300 */
}
.dark .toggle-off-theme {
    background-color: #475569; /* slate-600 */
}

/* Tooltip */
.tooltip-theme {
    background-color: #1f2937;
    color: #ffffff;
}
.dark .tooltip-theme {
    background-color: #f9fafb;
    color: #1f2937;
}

/* Section label */
.section-label-theme {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dark .section-label-theme {
    color: #6b7280;
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-theme-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dark .shadow-theme-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.shadow-theme {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}

.shadow-theme-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.shadow-theme-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   RING/FOCUS UTILITIES
   ============================================ */

.ring-theme-focus:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}
.dark .ring-theme-focus:focus {
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #60a5fa;
}

/* ============================================
   PLACEHOLDER UTILITIES
   ============================================ */

.placeholder-theme::placeholder {
    color: #9ca3af;
}
.dark .placeholder-theme::placeholder {
    color: #6b7280;
}

/* ============================================
   ALERT/INFO BOXES
   ============================================ */

/* Warning alert */
.alert-theme-warning {
    background-color: #fffbeb; /* amber-50 */
    color: #92400e; /* amber-800 */
}
.dark .alert-theme-warning {
    background-color: rgba(180, 83, 9, 0.2); /* amber-700/20 */
    color: #fcd34d; /* amber-300 */
}

/* Info alert */
.alert-theme-info {
    background-color: #eff6ff; /* blue-50 */
    border-color: #bfdbfe; /* blue-200 */
    color: #1e40af; /* blue-800 */
}
.dark .alert-theme-info {
    background-color: rgba(30, 58, 138, 0.3); /* blue-900/30 */
    border-color: #1d4ed8; /* blue-700 */
    color: #93c5fd; /* blue-300 */
}

/* Purple text */
.text-theme-purple {
    color: #7c3aed; /* purple-600 */
}
.dark .text-theme-purple {
    color: #a78bfa; /* purple-400 */
}

/* Icon button - success/restore variant */
.icon-btn-theme-success:hover {
    color: #16a34a;
    background-color: #f0fdf4;
}
.dark .icon-btn-theme-success:hover {
    color: #60a5fa; /* blue-400 for restore */
    background-color: rgba(51, 65, 85, 0.5);
}

/* Toggle switch - off state */
.toggle-off-theme {
    background-color: #d1d5db; /* gray-300 */
}
.dark .toggle-off-theme {
    background-color: #475569; /* slate-600 */
}