@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
   --font-main: "Inter", serif;

   --color-primary: #1571DA;
   --color-black: #2A2A2A;
   --color-secondary: #f0f0f4;
   --color-accent: #8C8E90;

   --text-size-hero: clamp(2.625rem, calc(1vw + 1.5rem), 3.625rem);
   /*
    mínimo: 2.625rem (≈ 42px)
    máximo: 3.625rem (≈ 58px)
  */

   /* para h1 */
   --text-size-main: clamp(2rem, calc(0.9vw + 1.25rem), 2.25rem);
   /*
  mínimo: 2rem (≈ 32px)
  máximo: 2.25rem (≈ 36px)
*/

   /* para h2 */
   --text-size-title: clamp(1.5rem, calc(0.9vw + 1.25rem), 1.75rem);
   /*
  mínimo: 1.5rem (≈ 24px)
  máximo: 1.75rem (≈ 28px)
*/

   /* para h3 */
   --text-size-subtitle: clamp(1.375rem, calc(0.9vw + 1.25rem), 1.5rem);
   /*
  mínimo: 1.375rem (≈ 22px)
  máximo: 1.5rem (≈ 24px)
*/


   /* para h4 */
   --text-size-heading: clamp(1.125rem, calc(0.65vw + 0.875rem), 1.25rem);
   /*
  mínimo: 1.125rem (≈ 18px)
  máximo: 1.25rem (≈ 20px)
*/

   /* small */
   --text-size-small-heading: clamp(0.75rem, calc(0.6vw + 0.8rem), 0.875rem);
   /*
  mínimo: 0.75rem (≈ 12px)
  máximo: 0.875rem (≈ 14px)
*/
   --text-parrafo: clamp(0.875rem, calc(0.5vw + 0.75rem), 0.875rem);
}

html,
body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.container {
   @apply px-8 sm:px-12 md:px-16 mx-auto;
}