/* styles/global.css */
@import "tailwindcss";

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 1) Your custom breakpoints (from your @theme block) */
@theme {
  --breakpoint-xs: 320px;
  --breakpoint-ssm: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 1920px;
}

:root {
  --background: #050505;
  --foreground: #ffffff;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 2) Fonts */
@font-face {
  font-family: 'Chillax';
  src: url('/fonts/Chillax-Regular.otf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'Chillax';
  src: url('/fonts/Chillax-Light.otf') format('opentype');
  font-weight: 300;
}
@font-face {
  font-family: 'Chillax';
  src: url('/fonts/Chillax-ExtraLight.otf') format('opentype');
  font-weight: 200;
}
@font-face {
  font-family: 'Bitter Rose';
  src: url('/fonts/BitterRose-Regular.ttf') format('truetype');
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bitter Rose', cursive;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 3) Base body + smooth scrolling */
html {
  scroll-behavior: smooth;      /* smooth “animated” scrolling */
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Chillax', sans-serif;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 4) Custom scrollbar utilities */
@layer utilities {
  /* For Firefox: thin track + custom colors */
  .custom-scrollbar-filter {
    scrollbar-width: thin;
    scrollbar-color: #6BB77A #456C4F;
  }

  /* WebKit-based browsers */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #565656;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6BB77A;
    border-radius: 4px;
    transition: background 0.3s ease;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}