@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Poppins', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --color-firefit-red: #a1100f;
    --color-firefit-gold: #e5c04d;
    --color-firefit-black: #000000;
    --color-firefit-cream: #f7f4ed;
    --color-firefit-charcoal: #111111;
}

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

    body {
        @apply bg-firefit-cream text-firefit-charcoal antialiased;
    }

    body.auth-page {
        background: #333333;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button {
        @apply font-bold;
    }
}

@layer components {
    .ff-shell {
        @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
    }

    .ff-gradient {
        background: linear-gradient(110deg, #a1100f 0%, #7a0b0a 48%, #000000 100%);
    }
}