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

@import './inputs.css';
@import './buttons.css';
@import './menu.css';
@import './controls.css';
@import './select.css';
@import './wysing-editor.css';

@theme {
   --font-main: "Roboto", sans-serif;
   --color-primary100: #3658BC;
   --color-primary200: #1347BC;
   /* --color-primary300: #D3D3FF; */
   /* --color-primary400: #EFE5DC; */
   --color-black: #252727;
   --color-secondary: #9AE5A6;
   --color-optional: #EEF1F4;

   /* --color-complement100: #EEF; */
   /* --color-complement200: #8787C4; */
   --color-complement300: #373760;
   /* --color-complement400: #725872; */
   --color-complement500: #2A172B;
   /* --color-complement600: #232366; */
   /* --color-complement700: #6750A4; */

   --color-black: #0F1010;
   --color-white: #FFFFFF;
   --color-gray: #797979;

   --color-greenme: #0CCE63;
   --color-redme: #FF3819;
   --color-violet: #FCFCFC;

   --text-size-hero: clamp(2rem, calc(1vw + 1.5rem), 3rem); /* para h1 */
   /*
   mínimo: 1.5rem = 24px
   máximo: 2rem = 32px
  */
   --text-size-title: clamp(1.5rem, calc(0.9vw + 1.25rem), 2rem); /* para h2 */
   /*
   mínimo: 1.25rem = 20px
   máximo: 1.5625rem = 25px
  */
   --text-size-subtitle: clamp(1.25rem, calc(0.75vw + 1rem), 1.5625rem); /* para h3, subtítulo */
   /*
   mínimo: 1.125rem = 18px 
   máximo: 1.25rem = 20px
  */
   --text-size-heading: clamp(1.125rem, calc(0.65vw + 0.875rem), 1.25rem); /* para h4 */
   /*
   mínimo: 0.75rem = 12px
   máximo: 0.875rem = 14px
  */
   --text-size-small-heading: clamp(0.625rem, calc(0.6vw + 0.8rem), 0.875rem); /* small */
}

h1, h2, h3, h4, h5, p{
   line-height: 1.4;
}

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

.container-center {
   @apply max-w-5xl mx-auto;
}

.main-wrap {
    @apply pt-24 lg:pt-0 lg:pl-[240px];
}

.w-200{
   @apply w-[200px];
}