/**
 * Midas Institute - Global Styles & Design System Utilities
 * Kinetic Enterprise Precision
 */

:root {
  --color-primary: #000000;
  --color-primary-container: #131b2e;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #7c839b;
  --color-secondary: #515f74;
  --color-secondary-container: #d5e3fd;
  --color-on-secondary-container: #57657b;
  --color-tertiary-accent: #ea580c;
  --color-on-tertiary-container: #e45405;
  --color-tertiary-fixed: #ffdbce;
  --color-tertiary-fixed-dim: #ffb599;
  --color-surface: #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #45464d;
  --color-outline: #76777d;
  --color-outline-variant: #c6c6cd;
  --color-dark-navy: #0F172A;
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Reset & Base */
html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

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

/* Typography Helpers */
.font-hanken {
  font-family: var(--font-display);
}
.font-inter {
  font-family: var(--font-body);
}

/* Dropdown Hover Transitions */
.dropdown-menu-custom {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.group:hover .dropdown-menu-custom,
.group:focus-within .dropdown-menu-custom {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Interactive Card Elevation */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* Mobile Offcanvas Drawer */
#mobileMenuOverlay {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mobileMenuOverlay.active {
  display: block;
  opacity: 1;
}

#mobileMenuDrawer {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobileMenuDrawer.active {
  transform: translateX(0);
}

/* Floating Back To Top Button */
#backToTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.3s ease;
}
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Lightbox Modal */
#galleryLightbox {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#galleryLightbox.active {
  display: flex;
  opacity: 1;
}

/* Image zoom effect on card hover */
.img-zoom-container {
  overflow: hidden;
}
.img-zoom-container img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom-container:hover img {
  transform: scale(1.04);
}

/* Shimmer / Skeleton for fast perceived load */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-placeholder {
  background: linear-gradient(90deg, #eff4ff 25%, #e2e8f0 50%, #eff4ff 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Touch targets for accessibility */
@media (max-width: 768px) {
  button, a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}