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

:root {
    --color-primary-50: 252 245 245;
    --color-primary-100: 250 234 235;
    --color-primary-200: 241 204 205;
    --color-primary-300: 233 173 175;
    --color-primary-400: 217 111 114;
    --color-primary-500: 200 49 54;
    --color-primary-600: 180 44 49;
    --color-primary-700: 120 29 32;
    --color-primary-800: 90 22 24;
    --color-primary-900: 60 15 16;

    --color-secondary-50: 242 246 250;
    --color-secondary-100: 230 238 244;
    --color-secondary-200: 191 212 229;
    --color-secondary-300: 153 187 213;
    --color-secondary-400: 77 135 181;
    --color-secondary-500: 0 84 149;
    --color-secondary-600: 0 76 134;
    --color-secondary-700: 0 50 89;
    --color-secondary-800: 0 38 67;
    --color-secondary-900: 0 25 45;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Bold.woff2') format('woff2'), url('../fonts/Rubik-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Medium.woff2') format('woff2'), url('../fonts/Rubik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Regular.woff2') format('woff2'), url('../fonts/Rubik-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

[x-cloak] {
    display: none !important;
}

* {
    @apply font-rubik font-normal text-lg text-neutral-500;
    @apply text-base;
}

@layer components {

    h1,h2 {
        @apply text-primary-500 font-medium text-5xl mb-2;
    }

    h3 {
        @apply text-primary-500 text-3xl mb-2;
    }

    h4,
    h5,
    h6 {
        @apply text-primary-500 text-xl mb-2;
    }

    strong {
        @apply font-medium;
    }

    main p {
        @apply mb-4;
    }
    main a {
        @apply hover:text-secondary-500;
    }

    .vehicle-list {
        @apply mb-10
    }

    .vehicle-list li {
        @apply flex;
    }

    .vehicle-list .label {
        @apply w-52;
    }


    /* Spacer */
    .spacer {
        @apply w-full flex flex-col py-2;
    }

    .spacer.top {
        @apply justify-start;
    }

    .spacer.center {
        @apply justify-center;
    }

    .spacer.bottom {
        @apply justify-end;
    }

    .spacer hr {
        @apply border-t border-t-primary-500;
    }

}