/*
 * Dokomandu IT Academic Solutions - Clean Modern Light Theme
 * Focused on IT Department Courses: Computer Science, Cyber Security & IT.
 * Editorial Newsreader serif + Plus Jakarta Sans typography.
 * 100% Responsive, High-Contrast White Background, Fluid Micro-Animations.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #059669;
  --color-primary-hover: #047857;
  --color-primary-light: #ecfdf5;
  --color-primary-border: #a7f3d0;
  --color-secondary: #4f46e5;
  --color-secondary-light: #eef2ff;
  
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-hover: #f1f5f9;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-light: #64748b;
  
  --border-light: #e2e8f0;
  --border-focus: #10b981;
  
  --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-float: 0 25px 50px -12px rgba(5, 150, 105, 0.25);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
}

body {
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Typography Extensions */
.font-serif, h1, h2, .font-heading {
  font-family: 'Newsreader', Georgia, Cambria, serif;
  letter-spacing: -0.018em;
}

.font-sans {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Explicit cursor pointers for all interactive controls */
button, a, input[type="radio"], input[type="checkbox"], select, [data-open-bot], [data-filter-tab] {
  cursor: pointer !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Clean Header Glassmorphism */
.glass-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Modern Card Hover Effects */
.hover-lift {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #cbd5e1;
}

/* Ambient Subtle Background Blobs */
.ambient-glow-light {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(79, 70, 229, 0.03) 50%, transparent 70%);
  filter: blur(60px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Pulse animation */
@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}
.animate-pulse-subtle {
  animation: pulseSubtle 2.5s infinite ease-in-out;
}

/* Float animation for live preview badge */
@keyframes floatBadge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.animate-float {
  animation: floatBadge 4s ease-in-out infinite;
}

/* Shimmer animation for primary CTAs */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.btn-shimmer {
  background-size: 200% 100%;
  transition: all 0.3s ease;
}
.btn-shimmer:hover {
  background-position: right center;
}

/* Chat message fade in */
@keyframes msgFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-msg {
  animation: msgFadeIn 0.25s ease-out forwards;
}

/* Mobile Responsiveness Improvements */
@media (max-width: 640px) {
  h1 {
    font-size: 2.15rem !important;
    line-height: 1.15 !important;
  }
  .mobile-p-tight {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}