/* css/themes.css - 10 Themes */

/* --- 1. Default Dark (Applied via :root in style.css) --- */
/* [data-bs-theme="dark"] { ... } // Uses :root defaults */
html:has([data-bs-theme="dark"]) { color-scheme: dark; }

/* --- 2. Light Theme --- */
[data-bs-theme="light"] {
  color-scheme: light;
  --app-bg-primary: #f8f9fa;
  --app-bg-secondary: #ffffff;
  --app-bg-tertiary: #e9ecef;
  --app-bg-hover: #dee2e6;
  --app-text-primary: #212529;
  --app-text-secondary: #495057;
  --app-text-muted: #6c757d;
  --app-border-color: #dee2e6;
  --app-accent-primary: #dc3545;
  --app-accent-primary-darker: #b02a37;
  --app-shadow-color: rgba(108, 117, 125, 0.1);
  --app-skeleton-bg: #e9ecef;
  --app-skeleton-highlight: #f8f9fa;
  --app-favorite-color: #dc3545;
  --app-focus-outline-color: rgba(220, 53, 69, 0.5);
  --app-instruction-bg: #f8f9fa;

  /* Override Bootstrap vars */
  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-body-tertiary-bg: var(--app-bg-secondary); --bs-emphasis-color: #000;
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-danger: var(--app-accent-primary); --bs-danger-rgb: 220,53,69;
  --bs-danger-text-emphasis: #8d232c; --bs-danger-bg-subtle: #f8d7da; --bs-danger-border-subtle: #f5c2c7;
}
[data-bs-theme="light"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme="light"] .instructions-panel .btn-close { filter: none; }
[data-bs-theme="light"] .favorite-btn { background: rgba(0,0,0,0.04); color: var(--app-text-muted); border-color: var(--app-border-color); }
[data-bs-theme="light"] .favorite-btn:hover { background: rgba(0,0,0,0.08); }
[data-bs-theme="light"] .tool-card.is-favorite .favorite-btn { background: rgba(220, 53, 69, 0.08); color: var(--app-favorite-color); border-color: rgba(220, 53, 69, 0.3); }
[data-bs-theme="light"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(220, 53, 69, 0.15); }
[data-bs-theme="light"] #reset-filters-btn { color: var(--app-text-secondary); border-color: var(--app-border-color); }
[data-bs-theme="light"] #reset-filters-btn:hover { color: var(--app-text-primary); background-color: var(--app-bg-hover); }

/* --- 3. Midnight Blue Theme (Dark Base) --- */
[data-bs-theme="blue"] {
  color-scheme: dark;
  --app-accent-primary: #3b82f6; --app-accent-primary-darker: #2563eb;
  --app-focus-outline-color: rgba(59, 130, 246, 0.5); --app-shadow-color: rgba(59, 130, 246, 0.1);
  --app-favorite-color: #60a5fa;
  --bs-primary: var(--app-accent-primary); --bs-primary-rgb: 59, 130, 246;
  --bs-primary-text-emphasis: #7bb0ff; --bs-primary-bg-subtle: #0b1a33; --bs-primary-border-subtle: #1d4ed8;
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-danger: #f43f5e; --bs-danger-rgb: 244,63,94;
}
[data-bs-theme="blue"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="blue"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="blue"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="blue"] .tool-card.is-favorite .favorite-btn { background: rgba(59, 130, 246, 0.15); color: var(--app-favorite-color); border-color: rgba(59, 130, 246, 0.3); }
[data-bs-theme="blue"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(59, 130, 246, 0.25); }

/* --- 4. Forest Night Theme (Dark Base) --- */
[data-bs-theme="forest"] {
  color-scheme: dark;
  --app-accent-primary: #10b981; --app-accent-primary-darker: #059669;
  --app-focus-outline-color: rgba(16, 185, 129, 0.5); --app-shadow-color: rgba(16, 185, 129, 0.1);
  --app-favorite-color: #34d399;
  --bs-primary: var(--app-accent-primary); --bs-primary-rgb: 16, 185, 129;
  --bs-primary-text-emphasis: #5ee3b0; --bs-primary-bg-subtle: #03281c; --bs-primary-border-subtle: #065f46;
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-danger: #ef4444; --bs-danger-rgb: 239,68,68;
}
[data-bs-theme="forest"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="forest"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="forest"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="forest"] .tool-card.is-favorite .favorite-btn { background: rgba(16, 185, 129, 0.15); color: var(--app-favorite-color); border-color: rgba(16, 185, 129, 0.3); }
[data-bs-theme="forest"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(16, 185, 129, 0.25); }

/* --- 5. Sunset Glow Theme (Dark Base) --- */
[data-bs-theme="sunset"] {
  color-scheme: dark;
  --app-accent-primary: #f97316; --app-accent-primary-darker: #ea580c;
  --app-focus-outline-color: rgba(249, 115, 22, 0.5); --app-shadow-color: rgba(249, 115, 22, 0.1);
  --app-favorite-color: #fb923c;
  --app-text-primary: #f3f4f6; --app-border-color: #4b5563;
  --bs-primary: var(--app-accent-primary); --bs-primary-rgb: 249, 115, 22;
  --bs-primary-text-emphasis: #fca953; --bs-primary-bg-subtle: #331804; --bs-primary-border-subtle: #9a3412;
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-danger: #a855f7; --bs-danger-rgb: 168,85,247;
}
[data-bs-theme="sunset"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="sunset"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="sunset"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="sunset"] .tool-card.is-favorite .favorite-btn { background: rgba(249, 115, 22, 0.15); color: var(--app-favorite-color); border-color: rgba(249, 115, 22, 0.3); }
[data-bs-theme="sunset"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(249, 115, 22, 0.25); }

/* --- 6. Deep Space Theme (Very Dark) --- */
[data-bs-theme="deep"] {
  color-scheme: dark;
  --app-bg-primary: #0f172a; --app-bg-secondary: #1e293b; --app-bg-tertiary: #334155; --app-bg-hover: #475569;
  --app-text-primary: #f1f5f9; --app-text-secondary: #94a3b8; --app-text-muted: #64748b; --app-border-color: #475569;
  --app-accent-primary: #7c3aed; --app-accent-primary-darker: #6d28d9;
  --app-focus-outline-color: rgba(124, 58, 237, 0.5); --app-shadow-color: rgba(124, 58, 237, 0.1);
  --app-favorite-color: #a78bfa; --app-instruction-bg: #1e293b;
  --bs-primary: var(--app-accent-primary); --bs-primary-rgb: 124, 58, 237;
  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
}
[data-bs-theme="deep"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="deep"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="deep"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="deep"] .tool-card.is-favorite .favorite-btn { background: rgba(124, 58, 237, 0.15); color: var(--app-favorite-color); border-color: rgba(124, 58, 237, 0.3); }
[data-bs-theme="deep"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(124, 58, 237, 0.25); }

/* --- 7. Arctic Light Theme (Light Base) --- */
[data-bs-theme="arctic"] {
  color-scheme: light;
  --app-bg-primary: #f9fafb; --app-bg-secondary: #ffffff; --app-bg-tertiary: #f3f4f6; --app-bg-hover: #e5e7eb;
  --app-text-primary: #111827; --app-text-secondary: #4b5563; --app-text-muted: #6b7280; --app-border-color: #d1d5db;
  --app-accent-primary: #0ea5e9; --app-accent-primary-darker: #0284c7;
  --app-focus-outline-color: rgba(14, 165, 233, 0.5); --app-shadow-color: rgba(14, 165, 233, 0.1);
  --app-favorite-color: #38bdf8; --app-instruction-bg: #ffffff;
  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-danger: #ef4444; --bs-danger-rgb: 239,68,68;
}
[data-bs-theme="arctic"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme="arctic"] .instructions-panel .btn-close { filter: none; }
[data-bs-theme="arctic"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="arctic"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="arctic"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="arctic"] .favorite-btn { background: rgba(0,0,0,0.04); color: var(--app-text-muted); border-color: var(--app-border-color); }
[data-bs-theme="arctic"] .favorite-btn:hover { background: rgba(0,0,0,0.08); }
[data-bs-theme="arctic"] .tool-card.is-favorite .favorite-btn { background: rgba(14, 165, 233, 0.08); color: var(--app-favorite-color); border-color: rgba(14, 165, 233, 0.3); }
[data-bs-theme="arctic"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(14, 165, 233, 0.15); }

/* --- 8. Lavender Bliss Theme (Light Base) --- */
[data-bs-theme="lavender"] {
  color-scheme: light;
  --app-bg-primary: #f5f3ff; --app-bg-secondary: #ffffff; --app-bg-tertiary: #ede9fe; --app-bg-hover: #ddd6fe;
  --app-text-primary: #2e1065; --app-text-secondary: #5b21b6; --app-text-muted: #7e22ce; --app-border-color: #c4b5fd;
  --app-accent-primary: #8b5cf6; --app-accent-primary-darker: #7c3aed;
  --app-focus-outline-color: rgba(139, 92, 246, 0.5); --app-shadow-color: rgba(139, 92, 246, 0.1);
  --app-favorite-color: #a78bfa; --app-instruction-bg: #ffffff;
  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-danger: #f43f5e; --bs-danger-rgb: 244,63,94;
}
[data-bs-theme="lavender"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b21b6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme="lavender"] .instructions-panel .btn-close { filter: none; }
[data-bs-theme="lavender"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="lavender"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="lavender"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="lavender"] .favorite-btn { background: rgba(0,0,0,0.04); color: var(--app-text-muted); border-color: var(--app-border-color); }
[data-bs-theme="lavender"] .favorite-btn:hover { background: rgba(0,0,0,0.08); }
[data-bs-theme="lavender"] .tool-card.is-favorite .favorite-btn { background: rgba(139, 92, 246, 0.08); color: var(--app-favorite-color); border-color: rgba(139, 92, 246, 0.3); }
[data-bs-theme="lavender"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(139, 92, 246, 0.15); }

/* --- 9. Matrix Theme (Dark Base) --- */
[data-bs-theme="matrix"] {
  color-scheme: dark;
  --app-bg-primary: #0c0c0c; --app-bg-secondary: #141414; --app-bg-tertiary: #1f1f1f; --app-bg-hover: #292929;
  --app-text-primary: #00ff41; --app-text-secondary: #00cc34; --app-text-muted: #009927; --app-border-color: #292929;
  --app-accent-primary: #00e639; --app-accent-primary-darker: #00b32c;
  --app-focus-outline-color: rgba(0, 255, 65, 0.5); --app-shadow-color: rgba(0, 255, 65, 0.1);
  --app-favorite-color: #4dff75; --app-instruction-bg: #141414;
  --font-primary: var(--bs-font-monospace); /* Monospace font! */
  --bs-primary: var(--app-accent-primary); --bs-primary-rgb: 0, 230, 57;
  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-danger: var(--app-accent-primary); --bs-danger-rgb: 0, 230, 57; /* Danger is green */
}
[data-bs-theme="matrix"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300cc34' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme="matrix"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #0c0c0c; /* Dark text on bright green */ }
[data-bs-theme="matrix"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="matrix"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #0c0c0c; }
[data-bs-theme="matrix"] .tool-card.is-favorite .favorite-btn { background: rgba(0, 230, 57, 0.15); color: var(--app-favorite-color); border-color: rgba(0, 230, 57, 0.3); }
[data-bs-theme="matrix"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(0, 230, 57, 0.25); }

/* --- 10. Coffee House Theme (Light Base) --- */
[data-bs-theme="coffee"] {
  color-scheme: light;
  --app-bg-primary: #fdfbf8; /* Very light cream */
  --app-bg-secondary: #edeae4; /* Light beige */
  --app-bg-tertiary: #dcd1c9; /* Darker beige */
  --app-bg-hover: #c9bbaa;
  --app-text-primary: #4a3f35; /* Dark coffee brown */
  --app-text-secondary: #7d6e63;
  --app-text-muted: #9c8f85;
  --app-border-color: #c9bbaa;
  --app-accent-primary: #8c5e4a; /* Coffee bean brown */
  --app-accent-primary-darker: #6f4e37; /* Espresso */
  --app-focus-outline-color: rgba(140, 94, 74, 0.5);
  --app-shadow-color: rgba(140, 94, 74, 0.1);
  --app-favorite-color: #a37c69; /* Lighter coffee */
  --app-instruction-bg: #edeae4;

  --bs-body-color: var(--app-text-primary); --bs-body-bg: var(--app-bg-primary);
  --bs-border-color: var(--app-border-color); --bs-tertiary-bg: var(--app-bg-tertiary);
  --bs-secondary-color: var(--app-text-secondary); --bs-secondary-bg: var(--app-bg-secondary);
  --bs-focus-ring-color: var(--app-focus-outline-color);
  --bs-link-color: var(--app-accent-primary); --bs-link-hover-color: var(--app-accent-primary-darker);
  --bs-danger: #a43a3a; --bs-danger-rgb: 164,58,58; /* Muted red */
}
[data-bs-theme="coffee"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237d6e63' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme="coffee"] .instructions-panel .btn-close { filter: none; }
[data-bs-theme="coffee"] .unlock-button { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff; }
[data-bs-theme="coffee"] .unlock-button:hover:not(:disabled) { background-color: var(--app-accent-primary-darker); border-color: var(--app-accent-primary-darker); }
[data-bs-theme="coffee"] #favorites-toggle-btn.active { background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); }
[data-bs-theme="coffee"] .favorite-btn { background: rgba(75, 56, 50, 0.06); color: var(--app-text-muted); border-color: var(--app-border-color); }
[data-bs-theme="coffee"] .favorite-btn:hover { background: rgba(75, 56, 50, 0.1); }
[data-bs-theme="coffee"] .tool-card.is-favorite .favorite-btn { background: rgba(140, 94, 74, 0.1); color: var(--app-favorite-color); border-color: rgba(140, 94, 74, 0.3); }
[data-bs-theme="coffee"] .tool-card.is-favorite .favorite-btn:hover { background: rgba(140, 94, 74, 0.2); }