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

@layer base {
:root {
    --primary-red: #FE0200;
    --success-green: #34AA24;
    --pure-black: #000000;
    --dark-red: #A80100;
    --orange: #FF9700;
    --yellow: #FFD100;
}
}

@layer utilities {
.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* Background color utilities */
.text-primary-red { color: var(--primary-red); }
.bg-primary-red { background-color: var(--primary-red); }
.hover\:bg-primary-red:hover { background-color: var(--primary-red); }

.text-success-green { color: var(--success-green); }
.bg-success-green { background-color: var(--success-green); }
.hover\:bg-success-green:hover { background-color: var(--success-green); }

.text-pure-black { color: var(--pure-black); }
.bg-pure-black { background-color: var(--pure-black); }
.hover\:bg-pure-black:hover { background-color: var(--pure-black); }

.text-dark-red { color: var(--dark-red); }
.bg-dark-red { background-color: var(--dark-red); }
.hover\:bg-dark-red:hover { background-color: var(--dark-red); }

.text-orange { color: var(--orange); }
.bg-orange { background-color: var(--orange); }
.hover\:bg-orange:hover { background-color: var(--orange); }

.text-yellow { color: var(--yellow); }
.bg-yellow { background-color: var(--yellow); }
.hover\:bg-yellow:hover { background-color: var(--yellow); }

/* Hover text color utilities */
.hover\:text-primary-red:hover { color: var(--primary-red); }
.hover\:text-success-green:hover { color: var(--success-green); }
.hover\:text-pure-black:hover { color: var(--pure-black); }
.hover\:text-dark-red:hover { color: var(--dark-red); }
.hover\:text-orange:hover { color: var(--orange); }
.hover\:text-yellow:hover { color: var(--yellow); }
}