/* customclass.css
   maps font-pop-xxx utilities to Poppins weights.
   You asked earlier for convenient classes like font-pop-500 etc.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --pop-100: 100;
  --pop-200: 200;
  --pop-300: 300;
  --pop-400: 400;
  --pop-500: 500;
  --pop-600: 600;
  --pop-700: 700;
  --pop-800: 800;
  --pop-900: 900;
}

/* Font family utility */
.font-pop {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Weight helpers */
.font-pop-100 { font-family: 'Poppins', sans-serif; font-weight: 100; }
.font-pop-200 { font-family: 'Poppins', sans-serif; font-weight: 200; }
.font-pop-300 { font-family: 'Poppins', sans-serif; font-weight: 300; }
.font-pop-400 { font-family: 'Poppins', sans-serif; font-weight: 400; }
.font-pop-500 { font-family: 'Poppins', sans-serif; font-weight: 500; }
.font-pop-600 { font-family: 'Poppins', sans-serif; font-weight: 600; }
.font-pop-700 { font-family: 'Poppins', sans-serif; font-weight: 700; }
.font-pop-800 { font-family: 'Poppins', sans-serif; font-weight: 800; }
.font-pop-900 { font-family: 'Poppins', sans-serif; font-weight: 900; }


/* Import upright Cormorant Garamond fonts only */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

/* Base family */
.font-corm {
  font-family: 'Cormorant Garamond', serif;
}

/* Weight utilities */
.font-corm-300 { font-family: 'Cormorant Garamond', serif; font-weight: 300; }
.font-corm-400 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
.font-corm-500 { font-family: 'Cormorant Garamond', serif; font-weight: 500; }
.font-corm-600 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.font-corm-700 { font-family: 'Cormorant Garamond', serif; font-weight: 700; }


/* Small helper to make clickable icon backgrounds darker on hover */
.icon-bg-hover { transition: background-color .18s ease; }
.icon-bg-hover:hover { background-color: rgba(255,255,255,0.12); }

/* Accessibility helpers */
.focus-ring:focus { outline: 3px solid rgba(0,0,0,0.08); outline-offset: 3px; }

/* Small responsive adjustments if needed */
@media (max-width: 768px) {
  .h-15 { height: 3.25rem; } /* if you used h-15 earlier */
}