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

:root {
    --color-bg:       #FFF;
    --color-bg-alt:   #EFEFED;
    --color-surface:  #FFFFFF;
    --color-dark:     #111111;
    --color-red:      #E01A1A;
    --color-border:   #E0DFDB;
    --color-muted:    #888888;
    --color-gray-100: #FFFFFF;
    --gradient-hero:    linear-gradient(135deg, #0A0A0A 0%, #1A0000 100%);
    --gradient-overlay: linear-gradient(to top, rgba(10,10,10,0.9) 0%, transparent 60%);
}

body {
    background-color: var(--color-bg);
    color: var(--color-dark);
    font-family: 'DM Sans', sans-serif;
}

@layer components {
    .text-display {
        @apply font-display text-6xl md:text-8xl lg:text-9xl leading-none uppercase tracking-tight;
    }
    .text-heading {
        @apply font-sans text-4xl font-bold leading-tight;
    }
    .text-subhead {
        @apply font-sans text-2xl font-semibold leading-snug;
    }
    .text-label {
        @apply font-condensed text-xs font-semibold uppercase tracking-widest text-[#888888];
    }
    .text-body {
        @apply font-sans text-base leading-relaxed;
    }
    .section {
        @apply py-16 md:py-24 lg:py-32;
    }
    .btn-primary {
        @apply inline-flex items-center justify-center px-8 py-4 bg-[#E01A1A] hover:bg-red-700 text-white font-sans font-semibold transition-colors duration-200;
    }
    .btn-secondary {
        @apply inline-flex items-center justify-center px-8 py-4 bg-transparent border border-[#111111] text-[#111111] hover:bg-[#111111] hover:text-white font-sans font-semibold transition-all duration-200;
    }
    .container-site {
        @apply container mx-auto px-5 md:px-10 lg:px-20 max-w-screen-2xl;
    }
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 20s linear infinite;
}