@import "tailwindcss";

@layer theme {
    :root{
      --font-sans: "Rubik", sans-serif
    }
}

@layer base {
    /* PRIMARY */
    .bg-primary, .bg-primary-hover:hover{background-color: var(--color-indigo-500) !important;}
    .text-primary {color: var(--color-indigo-500)}
    .font-color-primary-hover:hover {color: var(--color-indigo-500);}
    .border-primary {border-color: var(--color-indigo-500)}
    .outline-primary {outline-color: var(--color-indigo-500)}

    /* PRIMARY */
    .bg-secondary, .bg-secondary-hover:hover{background-color: var(--color-orange-400) !important;}
    .text-secondary {color: var(--color-orange-400)}
    .font-color-secondary-hover:hover {color: var(--color-orange-400);}
    .border-secondary {border-color: var(--color-orange-400)}
    .outline-secondary {outline-color: var(--color-orange-400)}

    .font-regular, .font-bold, .font-light, .font-medium{ font-family: "Rubik", sans-serif;}
    .font-light{font-weight: 300;}
    .font-medium{font-weight: 700;}
    .font-bold{font-weight: 900;}

    /* LEADS TYPE */
    .bg-hot{background-color: var(--color-red-800);}
    .bg-warm{background-color: var(--color-yellow-400);}
    .bg-cold{background-color: var(--color-blue-700);}
    .bg-passive{background-color: var(--color-gray-600);}
}