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

@layer base {
    :root {
        --british-red: #E11D48;
        --navy-900: #1B2951;
        --navy-800: #2A3F6B;
        --navy-700: #3A4F7B;
        --navy-600: #4A5F8B;
    }
}

@layer utilities {
    .text-british-red {
        color: var(--british-red);
    }

    .bg-british-red {
        background-color: var(--british-red);
    }

    .border-british-red {
        border-color: var(--british-red);
    }

    .text-navy-900 {
        color: var(--navy-700);
    }

    .bg-navy-900 {
        background-color: var(--navy-700);
    }

    .border-navy-900 {
        border-color: var(--navy-700);
    }

    .from-red-600 {
        --tw-gradient-from: #dc2626;
    }

    .to-red-700 {
        --tw-gradient-to: #b91c1c;
    }

    .from-blue-900 {
        --tw-gradient-from: #1B2951;
    }

    .to-blue-700 {
        --tw-gradient-to: #3A4F7B;
    }
}