/*=====| NEW STYLES |=====*/

:root {
    /* Base colors */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    /* Primary purple theme */
    --primary: 259 32% 34%;
    --primary-foreground: 0 0% 98%;
    --primary-light: 259 32% 45%;
    --primary-lighter: 259 32% 85%;

    /* Secondary colors */
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    /* Border and input colors */
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 259 32% 34%;

    /* Auth-specific colors */
    --auth-background: 250 20% 98%;
    --auth-form-background: 0 0% 100%;
    --auth-decorator-background: 259 25% 96%;

    --radius: 0.75rem;
}

.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary-light { background-color: hsl(var(--primary-light)); }
.bg-primary-lighter { background-color: hsl(var(--primary-lighter)); }
.bg-auth-background { background-color: hsl(var(--auth-background)); }
.bg-auth-form { background-color: hsl(var(--auth-form-background)); }
.bg-auth-decorator { background-color: hsl(var(--auth-decorator-background)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

.bg-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
}

.bg-gradient-subtle {
    background: linear-gradient(135deg, hsl(var(--auth-background)), hsl(var(--background)));
}

.bg-gradient-decorator {
    background: linear-gradient(135deg, hsl(var(--primary-lighter)), hsl(var(--auth-decorator-background)));
}

.shadow-auth {
    box-shadow: 0 10px 30px -5px hsl(var(--primary) / 0.1);
}

.shadow-form {
    box-shadow: 0 4px 20px -2px hsl(var(--primary) / 0.08);
}

@keyframes fade-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-fade-in { animation: fade-in 0.6s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.4s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }

.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply text-white shadow-sm hover:opacity-90;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
}

.btn-ghost {
    @apply text-gray-700 hover:bg-gray-100;
}

.btn-link {
    @apply text-primary hover:text-primary-light underline-offset-4 hover:underline;
}

.input-field {
    @apply w-full px-3 py-2 pl-10 border border-input rounded-lg bg-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

.decorator-svg {
    width: 384px;
    height: 384px;
    background: linear-gradient(135deg, #9333ea20, #7c3aed20);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
: relative;
    overflow: hidden;
}

.hidden { display: none; }
.block { display: block; }

.gap-6 {
    gap: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-12 {
    height: 3rem;
}

.w-8 {
    width: 2rem;
}

.w-12 {
    width: 3rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.bg-gray-100 {
    background-color: #F9F9F9;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-8 {
    margin-top: 2rem;
}

.leading-relaxed {
    line-height: 1.625;
}

img, video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .lg\\:flex { display: none !important; }
    .lg\\:p-12 { padding: 1.5rem !important; }
}