/* Cupertino Aesthetics, Typography, and Themes System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Apple native SF Pro system font stack defaults */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease, font-size 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* --- THEME SYSTEM INJECTIONS --- */

/* 1. Cupertino Light Theme (iOS/Cupertino clean look) */
.theme-cupertino-light,
.theme-cupertino-light body {
  background-color: #f2f2f7 !important;
  color: #1c1c1e !important;
}
.theme-cupertino-light .glass-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: none !important;
}
.theme-cupertino-light text,
.theme-cupertino-light span,
.theme-cupertino-light h1,
.theme-cupertino-light h2,
.theme-cupertino-light h3,
.theme-cupertino-light p,
.theme-cupertino-light a,
.theme-cupertino-light td,
.theme-cupertino-light th,
.theme-cupertino-light label {
  color: #1c1c1e;
}
.theme-cupertino-light .text-slate-400,
.theme-cupertino-light .text-slate-500 {
  color: #8e8e93 !important;
}
.theme-cupertino-light .nav-active {
  background: rgba(0, 122, 255, 0.08) !important;
  border-left: 3px solid #007aff !important;
  color: #007aff !important;
}
.theme-cupertino-light input,
.theme-cupertino-light select,
.theme-cupertino-light textarea {
  background-color: #f2f2f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
}

/* 2. Obsidian Dark Theme (OLED absolute black) */
.theme-obsidian-dark,
.theme-obsidian-dark body {
  background-color: #000000 !important;
  color: #f2f2f7 !important;
}
.theme-obsidian-dark .glass-panel {
  background: #09090b !important;
  border: 1px solid #1c1c1e !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8) !important;
}
.theme-obsidian-dark input,
.theme-obsidian-dark select,
.theme-obsidian-dark textarea {
  background-color: #000000 !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
}

/* 3. Nordic Frost Theme (Arctic Slate & Ice Blue) */
.theme-nordic-frost,
.theme-nordic-frost body {
  background-color: #0f172a !important; /* Cool dark deep slate */
  color: #e2e8f0 !important;
}
.theme-nordic-frost .glass-panel {
  background: #1e293b !important; /* Nordic card tone */
  border: 1px solid rgba(56, 189, 248, 0.1) !important;
  box-shadow: 0 8px 30px -5px rgba(15, 23, 42, 0.3) !important;
}
.theme-nordic-frost input,
.theme-nordic-frost select,
.theme-nordic-frost textarea {
  background-color: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  color: #e2e8f0 !important;
}
.theme-nordic-frost .nav-active {
  background: rgba(14, 165, 233, 0.15) !important;
  border-left: 3px solid #38bdf8 !important;
  color: #38bdf8 !important;
}

/* 4. Classic Dark Theme */
.theme-classic-dark,
.theme-classic-dark body {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
.theme-classic-dark .glass-panel {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.theme-classic-dark input,
.theme-classic-dark select,
.theme-classic-dark textarea {
  background-color: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

/* 5. Classic Light Theme */
.theme-classic-light,
.theme-classic-light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
.theme-classic-light .glass-panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}
.theme-classic-light input,
.theme-classic-light select,
.theme-classic-light textarea {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.theme-classic-light .nav-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(20, 184, 166, 0.06)) !important;
  border-left: 3px solid #059669 !important;
  color: #059669 !important;
}

/* --- ACCESSIBILITY STYLING LAYERS --- */

/* 1. High Contrast Mode Toggles */
.high-contrast {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.high-contrast .glass-panel {
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.high-contrast.dark .glass-panel,
.high-contrast.theme-obsidian-dark .glass-panel,
.high-contrast.theme-nordic-frost .glass-panel {
  border: 2px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}
.high-contrast.dark input,
.high-contrast.dark select,
.high-contrast.dark textarea {
  border: 2px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}
.high-contrast font,
.high-contrast span,
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast p,
.high-contrast a,
.high-contrast td,
.high-contrast th,
.high-contrast label {
  color: #000000 !important;
  font-weight: 600 !important;
}
.high-contrast.dark font,
.high-contrast.dark span,
.high-contrast.dark h1,
.high-contrast.dark h2,
.high-contrast.dark h3,
.high-contrast.dark p,
.high-contrast.dark a,
.high-contrast.dark td,
.high-contrast.dark th,
.high-contrast.dark label {
  color: #ffffff !important;
}

/* 2. Reduced Motion Mode Toggles */
.reduced-motion * {
  transition: none !important;
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- DYNAMIC UTILITIES --- */

/* Glassmorphism Defaults */
.glass-panel {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.light .glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 142, 147, 0.6);
}

/* Active Navigation Indicators */
.nav-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(20, 184, 166, 0.12));
  border-left: 3px solid #10b981;
  color: #10b981;
}

.light .nav-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(20, 184, 166, 0.06));
  border-left: 3px solid #059669;
  color: #059669;
}

/* Interactive Card Glows */
.card-glow-emerald:hover {
  box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}
.card-glow-rose:hover {
  box-shadow: 0 4px 20px -2px rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.25);
}
.card-glow-violet:hover {
  box-shadow: 0 4px 20px -2px rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
}
.card-glow-amber:hover {
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}
.card-glow-blue:hover {
  box-shadow: 0 4px 20px -2px rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}
.card-glow-indigo:hover {
  box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.25);
}
.card-glow-pink:hover {
  box-shadow: 0 4px 20px -2px rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.25);
}
.card-glow-cyan:hover {
  box-shadow: 0 4px 20px -2px rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.25);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pin Buttons (OLED/Cupertino adjusted) */
.pin-btn {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 1.35rem;
  font-weight: 600;
  transition: all 0.2s ease;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.light .pin-btn {
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.pin-btn:active {
  transform: scale(0.9);
  background: #10b981;
  color: white;
}

/* Text Gradients */
.text-gradient-emerald {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-rose {
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-violet {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- BRANDING THEME ADDITIONS --- */

/* 6. Sunset Rose Theme (Warm Amber & Deep Rose Violet) */
.theme-sunset-rose,
.theme-sunset-rose body {
  background-color: #1a0f1a !important;
  color: #fae8ff !important;
}
.theme-sunset-rose .glass-panel {
  background: rgba(45, 20, 45, 0.45) !important;
  border: 1px solid rgba(244, 63, 94, 0.15) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6) !important;
}
.theme-sunset-rose input,
.theme-sunset-rose select,
.theme-sunset-rose textarea {
  background-color: #120812 !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  color: #fae8ff !important;
}
.theme-sunset-rose .nav-active {
  background: rgba(244, 63, 94, 0.15) !important;
  border-left: 3px solid #f43f5e !important;
  color: #f43f5e !important;
}

/* 7. Emerald Velvet (Luxurious Deep Forest Green) */
.theme-emerald-velvet,
.theme-emerald-velvet body {
  background-color: #061f14 !important;
  color: #ecfdf5 !important;
}
.theme-emerald-velvet .glass-panel {
  background: rgba(6, 40, 25, 0.4) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
.theme-emerald-velvet input,
.theme-emerald-velvet select,
.theme-emerald-velvet textarea {
  background-color: #03100a !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: #ecfdf5 !important;
}
.theme-emerald-velvet .nav-active {
  background: rgba(16, 185, 129, 0.15) !important;
  border-left: 3px solid #10b981 !important;
  color: #10b981 !important;
}

/* 8. Cyberpunk Neon (Electric Purple & Vibrant Cyan) */
.theme-cyberpunk,
.theme-cyberpunk body {
  background-color: #0c001a !important;
  color: #f3e8ff !important;
}
.theme-cyberpunk .glass-panel {
  background: rgba(20, 0, 45, 0.5) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 0 15px -3px rgba(168, 85, 247, 0.3) !important;
}
.theme-cyberpunk input,
.theme-cyberpunk select,
.theme-cyberpunk textarea {
  background-color: #05000a !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  color: #ffffff !important;
}
.theme-cyberpunk .nav-active {
  background: rgba(168, 85, 247, 0.2) !important;
  border-left: 3px solid #a855f7 !important;
  color: #06b6d4 !important;
}

/* 9. Sakura Blossom Theme (Soft Pastel Cherry Pink light mode) */
.theme-sakura-blossom,
.theme-sakura-blossom body {
  background-color: #fff5f7 !important;
  color: #4a1525 !important;
}
.theme-sakura-blossom .glass-panel {
  background: #ffffff !important;
  border: 1px solid rgba(236, 72, 153, 0.12) !important;
  box-shadow: 0 4px 20px -2px rgba(236, 72, 153, 0.05) !important;
}
.theme-sakura-blossom text,
.theme-sakura-blossom span,
.theme-sakura-blossom h1,
.theme-sakura-blossom h2,
.theme-sakura-blossom h3,
.theme-sakura-blossom p,
.theme-sakura-blossom a,
.theme-sakura-blossom td,
.theme-sakura-blossom th,
.theme-sakura-blossom label {
  color: #4a1525;
}
.theme-sakura-blossom .text-slate-400,
.theme-sakura-blossom .text-slate-500 {
  color: #a85d75 !important;
}
.theme-sakura-blossom input,
.theme-sakura-blossom select,
.theme-sakura-blossom textarea {
  background-color: #fff0f3 !important;
  border: 1px solid rgba(236, 72, 153, 0.15) !important;
  color: #4a1525 !important;
}
.theme-sakura-blossom .nav-active {
  background: rgba(236, 72, 153, 0.1) !important;
  border-left: 3px solid #ec4899 !important;
  color: #ec4899 !important;
}

/* 10. Slate Minimalist (Ultra-clean Monochrome Slate Dark) */
.theme-slate-minimalist,
.theme-slate-minimalist body {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
}
.theme-slate-minimalist .glass-panel {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
}
.theme-slate-minimalist input,
.theme-slate-minimalist select,
.theme-slate-minimalist textarea {
  background-color: #111827 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}
.theme-slate-minimalist .nav-active {
  background: rgba(156, 163, 175, 0.15) !important;
  border-left: 3px solid #9ca3af !important;
  color: #f3f4f6 !important;
}