@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy:wght@400;700&family=Source+Sans+Pro:wght@400;600;700&family=Hanuman&display=swap');

/* Tailwind's base styles */
@layer tailwind-base {
  @tailwind base;
}

/* PrimeVue custom styles (if any) */
@layer primevue {
  @tailwind base;
}

/* Tailwind's components and utilities */
@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

/* Global styles for typography */
@layer base {

  /* Apply different fonts based on locale (English or Khmer) */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  a,
  button,
  label,
  input,
  textarea,
  select,
  option {
    /* Default font for English (Source Sans Pro) */
    font-family: 'Source Sans Pro', sans-serif;
  }

  /* Apply Khmer font when the locale is Khmer (using locale-specific class) */
  .lang-kh h1,
  .lang-kh h2,
  .lang-kh h3,
  .lang-kh h4,
  .lang-kh h5,
  .lang-kh h6,
  .lang-kh p,
  .lang-kh span,
  .lang-kh a,
  .lang-kh button,
  .lang-kh label,
  .lang-kh input,
  .lang-kh textarea,
  .lang-kh select,
  .lang-kh option {
    /* Default font for Khmer (Koulen) */
    font-family: 'Hanuman', sans-serif;
  }

  /* Font sizes for headings */
  h1 {
    @apply text-2xl md:text-3xl lg:text-3xl;
  }

  h2 {
    @apply text-2xl md:text-3xl lg:text-3xl;
  }

  h3 {
    @apply text-2xl md:text-2xl lg:text-2xl;
  }

  h4 {
    @apply text-xl md:text-xl lg:text-xl;
  }

  h5 {
    @apply text-xl md:text-xl lg:text-xl;
  }

  h6 {
    @apply text-lg md:text-xl lg:text-xl;
  }

  p {
    @apply text-base md:text-lg lg:text-xl;
  }
}