/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Heading Utilities */
  .text-h1 {
    @apply text-[56px] font-bold leading-tight;
  }

  .text-h2 {
    @apply text-[48px] font-bold leading-tight;
  }

  .text-h3 {
    @apply text-[40px] font-bold leading-tight;
  }

  .text-h4 {
    @apply text-[32px] font-bold leading-snug;
  }

  .text-h5 {
    @apply text-[24px] font-bold leading-snug;
  }

  .text-h6 {
    @apply text-[20px] font-bold leading-normal;
  }

  /* Body Text Utilities - Bold */
  .text-large-bold {
    @apply text-[30px] font-bold leading-relaxed;
  }

  .text-medium-bold {
    @apply text-[25px] font-bold leading-relaxed;
  }

  .text-normal-bold {
    @apply text-[21px] font-bold leading-relaxed;
  }

  .text-small-bold {
    @apply text-[18px] font-bold leading-relaxed;
  }

  /* Body Text Utilities - Light */
  .text-large-light {
    @apply text-[30px] font-light leading-relaxed;
  }

  .text-medium-light {
    @apply text-[25px] font-light leading-relaxed;
  }

  .text-normal-light {
    @apply text-[21px] font-light leading-relaxed;
  }

  .text-small-light {
    @apply text-[18px] font-light leading-relaxed;
  }
}