/* ==============================================
   BASE — Design tokens & global rules
   ============================================== */

:root {
  --c-primary:            #006a60;
  --c-primary-dark:       #004d45;
  --c-primary-light:      #49dcca;
  --c-primary-container:  #72feeb;
  --c-on-primary:         #ffffff;
  --c-surface:            #f5faff;
  --c-surface-low:        #eaf5ff;
  --c-surface-container:  #def0ff;
  --c-surface-high:       #d2ecff;
  --c-on-surface:         #011e2d;
  --c-on-surface-variant: #3c4947;
  --c-secondary:          #486273;
  --c-outline:            #6c7a77;

  --nav-bg:          rgba(1, 30, 45, 0.97);
  --section-py:      6rem;
  --container-max:   80rem;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile menu slide transition */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Generic lift-on-hover card utility (backwards compat) */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 106, 96, 0.12);
}

/* Analytics bar-chart animation */
@keyframes barGrow {
  from { height: 0; }
  to   { height: var(--bar-h); }
}
.bar-animate {
  animation: barGrow 0.8s ease-out forwards;
}