/* Marketing Site CSS - Only loaded on homepage/public pages */
/* This file is separate from app CSS to avoid conflicts */

:root {
    /* Color Variables from marketing site */
    --danger-50: 254, 242, 242;
    --danger-100: 254, 226, 226;
    --danger-200: 254, 202, 202;
    --danger-300: 252, 165, 165;
    --danger-400: 248, 113, 113;
    --danger-500: 239, 68, 68;
    --danger-600: 220, 38, 38;
    --danger-700: 185, 28, 28;
    --danger-800: 153, 27, 27;
    --danger-900: 127, 29, 29;
    --danger-950: 69, 10, 10;

    --gray-50: 250, 250, 250;
    --gray-100: 244, 244, 245;
    --gray-200: 228, 228, 231;
    --gray-300: 212, 212, 216;
    --gray-400: 161, 161, 170;
    --gray-500: 113, 113, 122;
    --gray-600: 82, 82, 91;
    --gray-700: 63, 63, 70;
    --gray-800: 39, 39, 42;
    --gray-900: 24, 24, 27;
    --gray-950: 9, 9, 11;

    --info-50: 239, 246, 255;
    --info-100: 219, 234, 254;
    --info-200: 191, 219, 254;
    --info-300: 147, 197, 253;
    --info-400: 96, 165, 250;
    --info-500: 59, 130, 246;
    --info-600: 37, 99, 235;
    --info-700: 29, 78, 216;
    --info-800: 30, 64, 175;
    --info-900: 30, 58, 138;
    --info-950: 23, 37, 84;

    --primary-50: 244, 242, 249;
    --primary-100: 233, 230, 244;
    --primary-200: 200, 191, 227;
    --primary-300: 167, 153, 210;
    --primary-400: 102, 77, 177;
    --primary-500: 36, 0, 143; /* AGBlue - Main brand color */
    --primary-600: 32, 0, 129;
    --primary-700: 27, 0, 107;
    --primary-800: 22, 0, 86;
    --primary-900: 18, 0, 70;
    --primary-950: 11, 0, 43;

    --success-50: 240, 253, 244;
    --success-100: 220, 252, 231;
    --success-200: 187, 247, 208;
    --success-300: 134, 239, 172;
    --success-400: 74, 222, 128;
    --success-500: 34, 197, 94;
    --success-600: 22, 163, 74;
    --success-700: 21, 128, 61;
    --success-800: 22, 101, 52;
    --success-900: 20, 83, 45;
    --success-950: 5, 46, 22;

    --warning-50: 255, 251, 235;
    --warning-100: 254, 243, 199;
    --warning-200: 253, 230, 138;
    --warning-300: 252, 211, 77;
    --warning-400: 251, 191, 36;
    --warning-500: 245, 158, 11;
    --warning-600: 217, 119, 6;
    --warning-700: 180, 83, 9;
    --warning-800: 146, 64, 14;
    --warning-900: 120, 53, 15;
    --warning-950: 69, 26, 3;

    /* Custom brand color */
    --AGBlue: 36, 0, 143;
}

/* Custom classes for marketing site */
.bg-AGBlue {
    background-color: rgb(var(--AGBlue));
}

.text-AGBlue {
    color: rgb(var(--AGBlue));
}

.from-AGBlue {
    --tw-gradient-from: rgb(var(--AGBlue));
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Custom color support for Filament-style buttons */
.bg-custom-600 {
    background-color: rgb(var(--primary-600, 32, 0, 129));
}

.bg-custom-500 {
    background-color: rgb(var(--primary-500, 36, 0, 143));
}

.bg-custom-400 {
    background-color: rgb(var(--primary-400, 102, 77, 177));
}

.hover\:bg-custom-500:hover {
    background-color: rgb(var(--primary-500, 36, 0, 143));
}

.hover\:bg-custom-400:hover {
    background-color: rgb(var(--primary-400, 102, 77, 177));
}

.focus-visible\:ring-custom-500\/50:focus-visible {
    --tw-ring-color: rgba(var(--primary-500, 36, 0, 143), 0.5);
}

.focus-visible\:ring-custom-400\/50:focus-visible {
    --tw-ring-color: rgba(var(--primary-400, 102, 77, 177), 0.5);
}

/* Gradient text effect */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Custom scrollbar for marketing pages only */
.marketing-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.marketing-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.marketing-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(var(--gray-400), 0.5);
    border-radius: 4px;
}

.marketing-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--gray-500), 0.7);
}

/* Smooth transitions */
.marketing-transition {
    transition: all 0.3s ease-out;
}

/* Hero gradient background */
.hero-gradient-bg {
    background: linear-gradient(to bottom,
        rgba(247, 247, 248, 1) 0%,
        rgba(247, 247, 248, 0.9) 30%,
        transparent 100%
    );
}

.dark .hero-gradient-bg {
    background: linear-gradient(to bottom,
        rgba(13, 13, 15, 1) 0%,
        rgba(13, 13, 15, 0.9) 30%,
        transparent 100%
    );
}

/* Animation utilities */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* Ensure marketing styles don't leak into app area */
body.marketing-page {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}