/* ==========================================================================
   vault/theme.css — Centralized Design System & Theme Engine for EX-VAULT
   Supports Light Mode (Default) and Dark Mode across Vault Hub & all Use Cases
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Color Palette - Light Theme (Default) */
  --vault-bg: #F8FAFC;
  --vault-body-bg: #F8FAFC;
  --vault-surface: #FFFFFF;
  --vault-surface-subtle: #F1F5F9;
  --vault-surface-hover: #E2E8F0;
  
  --vault-border: #E2E8F0;
  --vault-border-subtle: #CBD5E1;
  --vault-border-focus: #7C3AED;
  
  --vault-text-primary: #0F172A;
  --vault-text-secondary: #475569;
  --vault-text-muted: #64748B;
  
  --vault-accent: #7C3AED;
  --vault-accent-hover: #6D28D9;
  --vault-accent-light: #A855F7;
  --vault-accent-subtle: rgba(124, 58, 237, 0.08);
  --vault-accent-border: rgba(124, 58, 237, 0.25);
  --vault-accent-text: #6D28D9;
  
  --vault-glass-panel: rgba(255, 255, 255, 0.88);
  --vault-glass-panel-border: rgba(226, 232, 240, 0.95);
  --vault-glass-card: rgba(255, 255, 255, 0.92);
  --vault-glass-card-border: rgba(226, 232, 240, 0.95);
  --vault-glass-card-hover-bg: #FFFFFF;
  --vault-glass-card-hover-border: rgba(124, 58, 237, 0.45);
  
  --vault-glass-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  --vault-card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
  --vault-card-hover-shadow: 0 20px 35px -5px rgba(124, 58, 237, 0.12), 0 8px 10px -6px rgba(124, 58, 237, 0.04);

  --vault-input-bg: #FFFFFF;
  --vault-input-border: #CBD5E1;
  --vault-input-text: #0F172A;
  --vault-input-placeholder: #94A3B8;

  --vault-tag-bg: rgba(124, 58, 237, 0.08);
  --vault-tag-text: #6D28D9;
  --vault-tag-border: rgba(124, 58, 237, 0.2);

  --vault-badge-bg: rgba(124, 58, 237, 0.1);
  --vault-badge-text: #6D28D9;
  --vault-badge-border: rgba(124, 58, 237, 0.25);

  --vault-blob-1: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.14) 0%, rgba(216, 180, 254, 0.05) 50%, transparent 70%);
  --vault-blob-2: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.12) 0%, rgba(199, 210, 254, 0.05) 50%, transparent 70%);

  --vault-scrollbar-track: #F1F5F9;
  --vault-scrollbar-thumb: #CBD5E1;
  --vault-scrollbar-thumb-hover: #94A3B8;
  
  --vault-sidebar-active-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.04) 100%);
  --vault-sidebar-active-border: #7C3AED;
  --vault-sidebar-active-text: #4C1D95;

  --vault-iframe-bg: #F8FAFC;
  --vault-iframe-loader-bg: rgba(248, 250, 252, 0.95);
  --vault-iframe-loader-text: #475569;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Color Palette - Dark Theme */
  --vault-bg: #0A1325;
  --vault-body-bg: #0A1325;
  --vault-surface: #0F172A;
  --vault-surface-subtle: rgba(15, 23, 42, 0.7);
  --vault-surface-hover: rgba(30, 41, 59, 0.7);
  
  --vault-border: rgba(255, 255, 255, 0.08);
  --vault-border-subtle: rgba(255, 255, 255, 0.05);
  --vault-border-focus: #A855F7;
  
  --vault-text-primary: #F8FAFC;
  --vault-text-secondary: #94A3B8;
  --vault-text-muted: #64748B;
  
  --vault-accent: #A855F7;
  --vault-accent-hover: #9333EA;
  --vault-accent-light: #C084FC;
  --vault-accent-subtle: rgba(168, 85, 247, 0.1);
  --vault-accent-border: rgba(168, 85, 247, 0.25);
  --vault-accent-text: #C084FC;
  
  --vault-glass-panel: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 45%, rgba(168,85,247,0.04) 100%), rgba(10,19,37,0.7);
  --vault-glass-panel-border: rgba(255, 255, 255, 0.08);
  --vault-glass-card: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 45%, rgba(168,85,247,0.04) 100%), rgba(13,14,21,0.5);
  --vault-glass-card-border: rgba(255, 255, 255, 0.08);
  --vault-glass-card-hover-bg: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, rgba(168,85,247,0.08) 100%), rgba(13,14,21,0.7);
  --vault-glass-card-hover-border: rgba(168, 85, 247, 0.4);
  
  --vault-glass-shadow: 0 8px 32px rgba(0,0,0,0.35);
  --vault-card-shadow: 0 8px 32px rgba(0,0,0,0.35);
  --vault-card-hover-shadow: 0 12px 40px rgba(168,85,247,0.15), inset 0 1px 0 rgba(255,255,255,0.1);

  --vault-input-bg: rgba(15, 23, 42, 0.8);
  --vault-input-border: rgba(51, 65, 85, 0.6);
  --vault-input-text: #E2E8F0;
  --vault-input-placeholder: #64748B;

  --vault-tag-bg: rgba(168, 85, 247, 0.1);
  --vault-tag-text: #C084FC;
  --vault-tag-border: rgba(168, 85, 247, 0.2);

  --vault-badge-bg: rgba(168, 85, 247, 0.1);
  --vault-badge-text: #C084FC;
  --vault-badge-border: rgba(168, 85, 247, 0.2);

  --vault-blob-1: radial-gradient(ellipse at center, #2e1065 0%, transparent 70%);
  --vault-blob-2: radial-gradient(ellipse at center, #1e1b4b 0%, transparent 70%);

  --vault-scrollbar-track: rgba(10, 19, 37, 0.5);
  --vault-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --vault-scrollbar-thumb-hover: rgba(168, 85, 247, 0.4);
  
  --vault-sidebar-active-bg: linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(168,85,247,0.05) 100%);
  --vault-sidebar-active-border: #A855F7;
  --vault-sidebar-active-text: #FFFFFF;

  --vault-iframe-bg: rgba(2, 6, 23, 0.8);
  --vault-iframe-loader-bg: rgba(10, 19, 37, 0.9);
  --vault-iframe-loader-text: #D8B4FE;
}

/* Base Body Styles */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--vault-body-bg) !important;
  color: var(--vault-text-primary);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Glowing background animations */
@keyframes pulse-blob-1 {
  0%, 100% { opacity: 0.4; transform: scale(1) translate(0px, 0px); }
  50%       { opacity: 0.65; transform: scale(1.08) translate(15px, -15px); }
}
@keyframes pulse-blob-2 {
  0%, 100% { opacity: 0.3; transform: scale(1.05) translate(0px, 0px); }
  50%       { opacity: 0.5; transform: scale(0.95) translate(-15px, 15px); }
}
.blob-1 {
  background: var(--vault-blob-1) !important;
  animation: pulse-blob-1 14s ease-in-out infinite;
  will-change: transform;
  transition: background 0.3s ease;
}
.blob-2 {
  background: var(--vault-blob-2) !important;
  animation: pulse-blob-2 18s ease-in-out infinite;
  will-change: transform;
  transition: background 0.3s ease;
}

/* Glass Panels & Containers */
.glass-panel {
  background: var(--vault-glass-panel) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-color: var(--vault-glass-panel-border) !important;
  box-shadow: var(--vault-glass-shadow) !important;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-card {
  background: var(--vault-glass-card) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--vault-glass-card-border) !important;
  box-shadow: var(--vault-card-shadow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass-card:hover {
  background: var(--vault-glass-card-hover-bg) !important;
  border-color: var(--vault-glass-card-hover-border) !important;
  box-shadow: var(--vault-card-hover-shadow) !important;
}

/* Active Sidebar Item */
.active-sidebar-item {
  background: var(--vault-sidebar-active-bg) !important;
  border-left: 3px solid var(--vault-sidebar-active-border) !important;
  border-color: var(--vault-accent-border) !important;
  color: var(--vault-sidebar-active-text) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vault-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--vault-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vault-scrollbar-thumb-hover); }

/* Glow Effects */
.glow-purple:hover {
  box-shadow: var(--vault-card-hover-shadow) !important;
}

/* Theme Toggle Button Styling */
.theme-toggle-btn {
  background: var(--vault-surface);
  border: 1px solid var(--vault-border);
  color: var(--vault-text-primary);
  box-shadow: var(--vault-glass-shadow);
  transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
  background: var(--vault-surface-subtle);
  border-color: var(--vault-accent-border);
  transform: translateY(-1px);
}

/* Component Theme Mappings */
[data-theme="light"] .theme-title { color: var(--vault-text-primary) !important; }
[data-theme="light"] .theme-desc { color: var(--vault-text-secondary) !important; }
[data-theme="light"] .theme-subtle { color: var(--vault-text-muted) !important; }
[data-theme="light"] .theme-card-bg { background: var(--vault-surface) !important; border-color: var(--vault-border) !important; }
[data-theme="light"] .theme-input { background: var(--vault-input-bg) !important; border-color: var(--vault-input-border) !important; color: var(--vault-input-text) !important; }
[data-theme="light"] .theme-input::placeholder { color: var(--vault-input-placeholder) !important; }
[data-theme="light"] .theme-btn-secondary { background: var(--vault-surface) !important; border-color: var(--vault-border) !important; color: var(--vault-text-secondary) !important; }
[data-theme="light"] .theme-btn-secondary:hover { background: var(--vault-surface-hover) !important; color: var(--vault-text-primary) !important; }
[data-theme="light"] .theme-code-badge { background: #FFFFFF !important; border-color: var(--vault-border) !important; color: var(--vault-accent-text) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

[data-theme="light"] #iframeLoader { background-color: var(--vault-iframe-loader-bg) !important; }
[data-theme="light"] #iframeLoader .loader-text { color: var(--vault-text-primary) !important; }
[data-theme="light"] #iframeLoader .spinner { border-color: var(--vault-border) !important; border-top-color: var(--vault-accent) !important; }

[data-theme="light"] #activeCaseTitle { color: var(--vault-text-primary) !important; }
[data-theme="light"] #activeFileName { color: var(--vault-text-primary) !important; }
[data-theme="light"] #activeFilePath { color: var(--vault-text-muted) !important; }
[data-theme="light"] #activeSubfolderPath { color: var(--vault-accent-text) !important; }
[data-theme="light"] #activeBadge { background: var(--vault-badge-bg) !important; color: var(--vault-badge-text) !important; border-color: var(--vault-badge-border) !important; }
[data-theme="light"] #activeFileTag { background: var(--vault-badge-bg) !important; color: var(--vault-badge-text) !important; border-color: var(--vault-badge-border) !important; }
[data-theme="light"] #headerCaseStudyTitle { color: var(--vault-accent-text) !important; }
[data-theme="light"] #headerBreadcrumbSep { color: var(--vault-border-subtle) !important; }
[data-theme="light"] .header-vault-btn { color: var(--vault-text-primary) !important; }
[data-theme="light"] .header-vault-btn:hover { color: var(--vault-accent-text) !important; }

[data-theme="light"] .sidebar-footer { background: var(--vault-surface-subtle) !important; border-color: var(--vault-border) !important; color: var(--vault-text-muted) !important; }
[data-theme="light"] .sidebar-subfolder-box { background: var(--vault-surface-subtle) !important; border-color: var(--vault-border) !important; }
[data-theme="light"] .sidebar-border { border-color: var(--vault-border) !important; }
[data-theme="light"] .sidebar-btn-all { color: var(--vault-text-secondary) !important; }
[data-theme="light"] .sidebar-btn-all:hover { color: var(--vault-accent) !important; }
[data-theme="light"] .viewer-control-bar { background: var(--vault-glass-panel) !important; border-color: var(--vault-border) !important; }
[data-theme="light"] .viewer-btn { background: var(--vault-surface) !important; border-color: var(--vault-border) !important; color: var(--vault-text-secondary) !important; }
[data-theme="light"] .viewer-btn:hover { background: var(--vault-surface-subtle) !important; color: var(--vault-text-primary) !important; }
[data-theme="light"] .viewer-container { background: var(--vault-iframe-bg) !important; }

/* Child Prototypes Theming (Works both standalone and embedded in iframe) */
[data-theme="light"] body,
.iframe-light-override,
[data-theme="light"] body.iframe-child {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

[data-theme="light"] .glass-card,
.iframe-light-override .glass-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0F172A !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .text-white,
.iframe-light-override h1,
.iframe-light-override h2,
.iframe-light-override h3,
.iframe-light-override h4,
.iframe-light-override h5,
.iframe-light-override h6,
.iframe-light-override .text-white {
  color: #0F172A !important;
}

[data-theme="light"] .text-slate-200,
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400,
.iframe-light-override .text-slate-200,
.iframe-light-override .text-slate-300,
.iframe-light-override .text-slate-400 {
  color: #475569 !important;
}

[data-theme="light"] .text-slate-500,
.iframe-light-override .text-slate-500 {
  color: #64748B !important;
}

/* High contrast metric text in Light Mode */
[data-theme="light"] .text-emerald-400,
.iframe-light-override .text-emerald-400 {
  color: #047857 !important;
}
[data-theme="light"] .text-orange-400,
.iframe-light-override .text-orange-400 {
  color: #C2410C !important;
}
[data-theme="light"] .text-purple-400,
.iframe-light-override .text-purple-400 {
  color: #7E22CE !important;
}
[data-theme="light"] .text-blue-400,
.iframe-light-override .text-blue-400 {
  color: #1D4ED8 !important;
}
[data-theme="light"] .text-yellow-400,
.iframe-light-override .text-yellow-400 {
  color: #B45309 !important;
}
[data-theme="light"] .text-red-400,
.iframe-light-override .text-red-400 {
  color: #B91C1C !important;
}

[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-800\/80,
[data-theme="light"] .border-slate-800\/60,
.iframe-light-override .border-slate-800,
.iframe-light-override .border-slate-800\/80 {
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-700\/60,
.iframe-light-override .border-slate-700,
.iframe-light-override .border-slate-700\/60 {
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900\/40,
[data-theme="light"] .bg-slate-900\/50,
[data-theme="light"] .bg-slate-900\/60,
[data-theme="light"] .bg-slate-900\/80,
.iframe-light-override .bg-slate-900,
.iframe-light-override .bg-slate-950,
.iframe-light-override .bg-slate-900\/40,
.iframe-light-override .bg-slate-900\/50,
.iframe-light-override .bg-slate-900\/60,
.iframe-light-override .bg-slate-900\/80 {
  background-color: #F1F5F9 !important;
}

[data-theme="light"] .bg-slate-800,
[data-theme="light"] .bg-slate-800\/40,
[data-theme="light"] .bg-slate-800\/50,
[data-theme="light"] .bg-slate-800\/60,
.iframe-light-override .bg-slate-800,
.iframe-light-override .bg-slate-800\/50,
.iframe-light-override .bg-slate-800\/60 {
  background-color: #E2E8F0 !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
.iframe-light-override input,
.iframe-light-override select,
.iframe-light-override textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] table thead,
.iframe-light-override table thead {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] table tbody tr,
.iframe-light-override table tbody tr {
  border-color: #F1F5F9 !important;
}

[data-theme="light"] table tbody tr:hover,
.iframe-light-override table tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Standalone Prototype Top Navigation Bar */
.vault-standalone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  background: var(--vault-surface);
  border: 1px solid var(--vault-border);
  box-shadow: var(--vault-glass-shadow);
  transition: all 0.25s ease;
}
[data-theme="dark"] .vault-standalone-bar {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}

/* PIN Shake Animation */
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.animate-shake {
  animation: pin-shake 0.35s ease-in-out;
}