/* ==========================================================================
   Legal Tech Systems - Shared Styles
   Centralized CSS for consistent styling across all pages
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */
:root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Modal Animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-backdrop {
    animation: modalBackdropFadeIn 0.3s ease-out;
}

.modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

/* Rotating Text Animation (for index.html) */
.rotating-text {
    display: block;
    position: relative;
    min-height: 1.2em;
    width: 100%;
    text-align: center;
}

.rotating-text .word {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    animation: rotateWord 28s infinite;
    color: hsl(210 40% 98%);
    white-space: nowrap;
    text-align: center;
}

.rotating-text .word:nth-child(1) { animation-delay: 0s; }
.rotating-text .word:nth-child(2) { animation-delay: 4s; }
.rotating-text .word:nth-child(3) { animation-delay: 8s; }
.rotating-text .word:nth-child(4) { animation-delay: 12s; }
.rotating-text .word:nth-child(5) { animation-delay: 16s; }
.rotating-text .word:nth-child(6) { animation-delay: 20s; }
.rotating-text .word:nth-child(7) { animation-delay: 24s; }

@keyframes rotateWord {
    0%, 14.28% {
        opacity: 1;
        transform: translateY(0);
    }
    17.85%, 100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   Component Styles
   ========================================================================== */

/* Hero Background Gradient */
.hero-gradient {
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

/* Hero Title Gray Color */
.hero-title-gray {
    color: hsl(215 20.2% 65.1%);
}

/* Section Spacing Utility */
.section-spacing {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Tailwind CSS Configuration
   Note: This will be loaded via CDN in HTML, but configuration is centralized here
   ========================================================================== */

/*
Tailwind Config (to be applied via script tag):
{
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                border: "hsl(217.2 32.6% 17.5%)",
                input: "hsl(217.2 32.6% 17.5%)",
                ring: "hsl(212.7 26.8% 83.9%)",
                background: "hsl(222.2 84% 4.9%)",
                foreground: "hsl(210 40% 98%)",
                primary: {
                    DEFAULT: "hsl(210 40% 98%)",
                    foreground: "hsl(222.2 47.4% 11.2%)",
                },
                secondary: {
                    DEFAULT: "hsl(217.2 32.6% 17.5%)",
                    foreground: "hsl(210 40% 98%)",
                },
                destructive: {
                    DEFAULT: "hsl(0 62.8% 30.6%)",
                    foreground: "hsl(210 40% 98%)",
                },
                muted: {
                    DEFAULT: "hsl(217.2 32.6% 17.5%)",
                    foreground: "hsl(215 20.2% 65.1%)",
                },
                accent: {
                    DEFAULT: "hsl(217.2 32.6% 17.5%)",
                    foreground: "hsl(210 40% 98%)",
                    teal: "#14B8A6",
                    purple: "#8B5CF6",
                    pink: "#EC4899"
                },
                popover: {
                    DEFAULT: "hsl(222.2 84% 4.9%)",
                    foreground: "hsl(210 40% 98%)",
                },
                card: {
                    DEFAULT: "hsl(222.2 84% 4.9%)",
                    foreground: "hsl(210 40% 98%)",
                },
                'accent-teal': '#14B8A6',
                'accent-purple': '#8B5CF6',
                'accent-pink': '#EC4899',
            },
            borderRadius: {
                lg: "0.5rem",
                md: "calc(0.5rem - 2px)",
                sm: "calc(0.5rem - 4px)",
            },
            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
            },
        }
    }
}
*/