@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

.menu-icon {
  color: #888888 !important; /* Tenuous gray by default */
  font-size: 22px !important;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; /* Thin stroke 200 */
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, font-variation-settings 0.2s ease !important;
}

/* Hover state */
.menu-icon:hover {
  color: var(--iopgps-orange) !important;
  transform: scale(1.08);
}

/* Active states (Material UI Mui-selected styles) */
.Mui-selected .menu-icon,
.MuiListItemButton-root.Mui-selected .menu-icon,
.MuiBottomNavigationAction-root.Mui-selected .menu-icon {
  color: var(--iopgps-orange) !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important; /* Filled and weight 300 when active */
}

:root {
  --iopgps-orange: #1976D2;
  --iopgps-orange-light: #42A5F5;
  --iopgps-orange-dark: #1565C0;
  --iopgps-black: #190E01;
  --iopgps-black-light: #3D2E1A;
  --iopgps-bg-warm: #FFF8F0;
  --iopgps-bg-cream: #FFF3E0;
}

html, body {
  height: 100%;
  font-family: 'Inter', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(250, 160, 47, 0.3);
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(250, 160, 47, 0.6);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 160, 47, 0.3) transparent;
}

/* Smooth transitions globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Selection color */
::selection {
  background: rgba(250, 160, 47, 0.3);
  color: #190E01;
}

/* Preloader breathing animation */
@keyframes fadeInPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.6;
    transform: scale(0.97);
  }
}