@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

/* Base styles and Theme definitions */
:root {
  --primary-color: #4f46e5; /* Indigo 600 */
  --primary-hover: #4338ca;
  --secondary-color: #10b981;
  --bg-light: #f3f4f6; /* Gray 50 */
  --bg-dark: #111827;
  --card-light: #ffffff;
  --card-dark: #1f2937;
  --text-light: #1f2937; /* Gray 800 */
  --text-dark: #f3f4f6; /* Gray 100 */
  --modal-bg: rgba(0, 0, 0, 0.5);
}

* {
  font-family: "Montserrat", sans-serif;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

/* Global transitions for smoothness */
body {
  transition:
    background-color 0.3s,
    color 0.3s;
}

.theme-bg {
  background-color: var(--bg-light);
  color: var(--text-light);
}

.dark .theme-bg {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

.theme-text-primary {
  color: var(--primary-color);
}

.theme-text {
  color: var(--text-light);
}

.dark .theme-text {
  color: var(--text-dark);
}

.theme-card {
  background-color: white;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Premium shadow */
  backdrop-filter: blur(10px); /* Glassmorphism hint */
}

.dark .theme-card {
  background-color: rgba(31, 41, 55, 0.8); /* Semi-transparent for glass effect */
  border: 1px solid rgba(75, 85, 99, 0.5);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.theme-input {
  border: 1px solid #d1d5db;
  background-color: #f9fafb; /* Slightly off-white */
  color: #1f2937;
  transition: all 0.3s ease;
}

.theme-input:focus {
  border-color: var(--primary-color);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); /* Focus ring */
  outline: none;
}

.dark .theme-input {
  border-color: #4b5563;
  background-color: #111827;
  color: white;
}

.dark .theme-input:focus {
  border-color: var(--primary-color);
  background-color: #1f2937;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

.dark::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

/* Custom Styles for Mobile Bottom Navigation */
#mobile-nav {
  z-index: 1000;
}

.nav-item {
  transition: all 0.2s;
}

.nav-item:hover,
.nav-item.active {
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* Article Editor Styles */
.block-handle {
  cursor: grab;
}

.block-handle:active {
  cursor: grabbing;
}

/* Flip Card Styles */
.perspective-\[1000px\] {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.flip-card-container.flipped {
  transform: rotateY(180deg);
}

.flip-card-face {
  transition: all 0.7s;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Utility for screens without header/footer */
.min-h-screen-minus-header-footer {
  min-height: calc(100vh - 12rem);
}
/* Font enforcement */
* {
  font-family: 'Montserrat', sans-serif !important;
}

/* Fix for Material Icons (Request from user) */
.material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
}


/* Base Theme Variables */

.theme-bg {
  background-color: #f8fafc; /* Slate-50 - Cooler light gray */
  color: #0f172a; /* Slate-900 - Deep dark blue/black for text */
}

.theme-text {
  color: #0f172a;
}

.theme-text-primary {
  color: #4f46e5;
}

.theme-card {
  background-color: #ffffff;
  color: #0f172a;
  /* Enhanced Light Mode Shadow */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.02); /* Subtle border ring */
}

.theme-input {
  border: 1px solid #cbd5e1; /* Slate-300 */
  background-color: #ffffff;
  color: #0f172a;
}

.theme-input::placeholder {
    color: #94a3b8; /* Slate-400 */
}

/* Dark Mode Overrides */

.dark .theme-bg {
  background-color: #0b0f19; /* Slightly darker than Slate-900 */
  color: #f8fafc;
}

.dark .theme-text {
  color: #f8fafc;
}

.dark .theme-text-primary {
  color: #818cf8; /* Indigo-400 */
}

.dark .theme-card {
  background-color: #1e293b; /* Slate-800 */
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.dark .theme-input {
  border: 1px solid #334155; /* Slate-700 */
  background-color: #1e293b; /* Slate-800 */
  color: #f8fafc;
}

.dark .theme-input::placeholder {
    color: #64748b;
}

/* Utility for Flip Card */
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flipped .flip-card-container {
  transform: rotateY(180deg);
}

.perspective-\[1000px\] {
  perspective: 1000px;
}