*,
*::before,
*::after {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

}

:root {

    /* CORES PRINCIPAIS */

    --color-primary: #e60000;
    --color-primary-hover: #b60000;
    --color-highlight: #ff3333;


    /* ESCUROS */

    --color-black: #000000;
    --color-dark: #1a1a1a;
    --color-dark-secondary: #333333;


    /* CLAROS */

    --color-white: #ffffff;
    --color-header-bg: #fafafa;
    --color-light: #f5f5f5;
    --color-card: #eeeeee;
    --color-divider: #bfbfbf;


    /* TEXTOS */

    --color-text: #333333;
    --color-muted: #666666;

    /* ESPAÇAMENTOS */

    --space-1: 4px;

    --space-2: 8px;

    --space-3: 12px;

    --space-4: 16px;

    --space-5: 20px;

    --space-6: 24px;

    --space-7: 32px;

    --space-8: 40px;

    --space-9: 48px;

    --space-10: 64px;

    --space-11: 80px;

    --space-12: 96px;



    /* =========================
       CONTAINER
    ========================= */


    --container-width: 1200px;

    --container-padding: 24px;

    --header-height: 130px;

    --navbar-padding: 88px;

    /* =========================
       BORDAS
    ========================= */


    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 16px;

    --radius-circle: 50%;



    /* =========================
       FONT SIZE - TEXTO
    ========================= */


    --text-xs: .75rem;      /* 12px */

    --text-sm: .875rem;     /* 14px */

    --text-md: 1rem;        /* 16px */

    --text-lg: 1.125rem;    /* 18px */

    --text-xl: 1.25rem;     /* 20px */

    --text-2xl: 1.5rem;     /* 24px */

    --text-3xl: 1.875rem;   /* 30px */

    --text-4xl: 2.25rem;    /* 36px */

    --text-5xl: 3rem;       /* 48px */

    --text-6xl: 3.75rem;    /* 60px */




    /* =========================
       TÍTULOS
    ========================= */


    --heading-sm: 1.5rem;       /* 24px */

    --heading-md: 2rem;         /* 32px */

    --heading-lg: 3rem;         /* 48px */

    --heading-xl: 4rem;         /* 64px */




    /* =========================
       ÍCONES
    ========================= */


    --icon-xs: .75rem;      /* 12px */

    --icon-sm: 1rem;        /* 16px */

    --icon-md: 1.25rem;     /* 20px */

    --icon-lg: 1.5rem;      /* 24px */

    --icon-xl: 2rem;        /* 32px */

    --icon-2xl: 3rem;       /* 48px */

    /* =========================
       SOMBRAS
    ========================= */


    --shadow-sm:
    0 4px 10px rgba(0,0,0,.08);


    --shadow-md:
    0 10px 25px rgba(0,0,0,.15);


    --shadow-lg:
    0 20px 50px rgba(0,0,0,.20);



    /* =========================
       TRANSIÇÕES
    ========================= */


    --transition-fast: .2s ease;

    --transition-normal: .35s ease;

    --transition-slow: .6s ease;

    /* =========================
      BUTTON SIZES
   ========================= */

   .btn-sm {
      width: 120px !important;
   }

   .btn-md {
      width: 180px !important;
   }

   .btn-lg {
      width: 240px !important;
   }

   .btn-xl {
      width: 320px !important;
   }

    /* FONTES */

    --font-heading: "Poppins", sans-serif;

    --font-body: "Inter", sans-serif;

    --font-highlight: "Raleway", sans-serif;
}