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

@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        @apply antialiased text-gray-900;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
}

@tailwind variants;

@layer utilities {
    .text-petrol {
        color: #0066A1;
    }
    .text-petrol-light {
        color: #E8F4F8;
    }
    .text-petrol-dark {
        color: #004C7A;
    }
    .bg-petrol {
        background-color: #0066A1;
    }
    .bg-petrol-light {
        background-color: #E8F4F8;
    }
    .bg-petrol-dark {
        background-color: #004C7A;
    }
    .text-darkgray {
        color: #2D3436;
    }
    .text-darkgray-light {
        color: #636E72;
    }
    .bg-darkgray {
        background-color: #2D3436;
    }
    .bg-h2black {
        background-color: #1A1A2E;
    }
    .border-petrol {
        border-color: #0066A1;
    }
    .hover\:bg-petrol-dark:hover {
        background-color: #004C7A;
    }
    .hover\:bg-petrol-light:hover {
        background-color: #E8F4F8;
    }
    .hover\:text-petrol:hover {
        color: #0066A1;
    }
    .hover\:text-petrol-dark:hover {
        color: #004C7A;
    }
    .ring-petrol {
        --tw-ring-color: #0066A1;
    }
}