@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 8%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 8%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 8%;
    --primary: 0 85% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 97%;
    --secondary-foreground: 0 0% 8%;
    --muted: 0 0% 95%;
    --muted-foreground: 0 0% 40%;
    --accent: 0 5% 96%;
    --accent-foreground: 0 0% 8%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 92%;
    --input: 0 0% 92%;
    --ring: 0 85% 50%;
    --radius: 0.75rem;
    --surface-elevated: 0 0% 100%;
    --surface-dark: 0 0% 6%;
    --surface-dark-foreground: 0 0% 95%;
    --red-soft: 0 60% 96%;
    --red-medium: 0 70% 92%;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
}

.text-gradient-red {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(135deg, hsl(0, 85%, 48%), hsl(0, 90%, 60%));
}

.bg-surface-dark {
    background-color: hsl(var(--surface-dark));
}

.text-surface-dark-foreground {
    color: hsl(var(--surface-dark-foreground));
}

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

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

.glow-red {
    box-shadow: 0 8px 30px -6px hsl(0 85% 50% / 0.4);
}

.glow-red-sm {
    box-shadow: 0 4px 20px -4px hsl(0 85% 50% / 0.25);
}

.shadow-luxury {
    box-shadow: 0 20px 60px -15px hsl(0 0% 0% / 0.1), 0 4px 20px -5px hsl(0 0% 0% / 0.05);
}

.shadow-luxury-lg {
    box-shadow: 0 30px 80px -20px hsl(0 0% 0% / 0.15), 0 8px 30px -5px hsl(0 0% 0% / 0.08);
}

.border-red-subtle {
    border-color: hsl(0 85% 50% / 0.15);
}

.bg-secondary\/30 {
    background-color: hsla(var(--secondary), 0.3);
}

.bg-secondary\/50 {
    background-color: hsla(var(--secondary), 0.5);
}

.bg-primary\/10 {
    background-color: hsla(var(--primary), 0.1);
}

.bg-emerald-500\/10 {
    background-color: hsla(142, 71%, 45%, 0.1);
}

.text-emerald-600 {
    color: hsl(142, 71%, 45%);
}

.bg-blue-500\/10 {
    background-color: hsla(217, 91%, 60%, 0.1);
}

.text-blue-600 {
    color: hsl(217, 91%, 60%);
}

.bg-amber-500\/10 {
    background-color: hsla(38, 92%, 50%, 0.1);
}

.text-amber-600 {
    color: hsl(38, 92%, 50%);
}

.bg-secondary\/50 {
    background-color: hsla(var(--secondary), 0.5);
}

.bg-primary\/5 {
    background-color: hsla(var(--primary), 0.05);
}

.border-primary\/30 {
    border-color: hsla(var(--primary), 0.3);
}

.border-primary\/20 {
    border-color: hsla(var(--primary), 0.2);
}

/* Progress Bar */
.progress-root {
    position: relative;
    overflow: hidden;
    background: hsl(var(--secondary));
    border-radius: 9999px;
    width: 100%;
    height: 8px;
}

.progress-indicator {
    background-color: hsl(var(--primary));
    height: 100%;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.1, 0, 0, 1);
}

.glass-white {
    background: hsl(0 0% 100% / 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: hsl(0, 0%, 95%);
}

::-webkit-scrollbar-thumb {
    background: hsl(0, 0%, 70%);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(0, 85%, 50%);
}

@keyframes scan-line {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.animate-scan-line {
    position: absolute;
    width: 100%;
    animation: scan-line 3s linear infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}