/* Json2Doc Homepage Styles - HSL Color System */

:root {
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;
    --primary: 176 67% 56%; /* #44dad0 */
    --primary-foreground: 0 0% 100%;
    --primary-light: 176 67% 70%;
    --primary-dark: 176 67% 40%;
    --secondary: 195 75% 88%;
    --secondary-foreground: 215 85% 25%;
    --accent: 185 85% 50%; /* #13daec */
    --accent-foreground: 0 0% 100%;
    --accent-bright: 185 95% 45%;
    --accent-glow: 185 85% 65%;
    --muted: 210 30% 94%;
    --muted-foreground: 215 15% 45%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 215 20% 88%;
    --input: 215 20% 92%;
    --ring: 185 85% 50%;
    --radius: 0.75rem;
    --gradient-hero: linear-gradient(135deg, hsl(176 67% 56%), hsl(176 67% 40%));
    --gradient-accent: linear-gradient(135deg, hsl(185 85% 50%), hsl(185 95% 45%));
    --gradient-subtle: linear-gradient(180deg, hsl(210 20% 98%), hsl(210 30% 96%));
    --shadow-soft: 0 4px 20px -4px hsl(176 67% 56% / 0.1);
    --shadow-medium: 0 10px 40px -10px hsl(176 67% 56% / 0.15);
    --shadow-glow: 0 0 60px hsl(176 67% 56% / 0.3);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

.bg-grid {
    background-color: hsl(var(--background));
    background-image: 
        linear-gradient(to right, hsl(var(--border) / 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--border) / 0.15) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Navbar */
.navbar-flat {
    background: hsl(var(--background) / 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--border) / 0.5);
}

/* Buttons */
.btn-flat-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    transition: var(--transition-smooth);
}

.btn-flat-primary:hover {
    background: hsl(var(--primary-dark));
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

/* Code Editor */
.code-editor {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: var(--shadow-medium);
}

.code-editor-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

/* Word Editor */
.word-editor {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-medium);
}

.word-editor-toolbar {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
}

.word-editor-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--accent-bright)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Chat Animation */
.chat-message {
    animation: fadeInUp 0.6s ease-out forwards;
}

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

.typing-text {
    display: inline-block;
}

.download-button {
    transition: opacity 0.5s ease-out, transform 0.3s ease;
}

.download-button:hover {
    transform: translateY(-2px);
}

/* AI Chat Container - Circular gradient fade */
#ai-chat-container {
    position: relative;
}

/* Cards */
.card-flat {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    transition: var(--transition-smooth);
}

.stat-card-flat {
    background: hsl(var(--card) / 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: var(--transition-smooth);
}

.stat-card-flat:hover {
    border-color: hsl(var(--primary));
}

.mode-card-flat {
    background: hsl(var(--card) / 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    padding: 2rem;
    transition: var(--transition-smooth);
}

.mode-card-flat:hover {
    border-color: hsl(var(--primary) / 0.5);
    background: hsl(var(--card));
}

.mode-card-flat-primary {
    background: var(--gradient-hero);
    border: 1px solid hsl(var(--primary-dark) / 0.5);
    border-radius: 1rem;
    padding: 2rem;
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-medium);
}

.card-flat:hover {
    border-color: hsl(var(--primary));
}

.card-flat-highlighted {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--primary));
    border-radius: 1rem;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

/* Document Preview */
.doc-preview-flat {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
}

/* Secondary Button */
.btn-flat-secondary {
    background: transparent;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    transition: var(--transition-smooth);
}

.btn-flat-secondary:hover {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

/* Hero Card */
.hero-card-flat {
    background: var(--gradient-hero);
    border: 1px solid hsl(var(--primary-dark));
    border-radius: 1.5rem;
}

/* Feature Cards */
.feature-card-highlighted {
    background: var(--gradient-hero);
    border: 1px solid hsl(var(--primary-dark));
    border-radius: 1rem;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-smooth);
}

.feature-card-highlighted:hover {
    box-shadow: var(--shadow-glow);
}

/* Icon Containers */
.icon-container-flat {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--gradient-hero);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Utility Classes */
.border-thin {
    border-width: 1px;
}

.border-medium {
    border-width: 2px;
}

/* Badge */
.badge-flat {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .card-flat,
    .mode-card-flat,
    .mode-card-flat-primary {
        padding: 1.5rem;
    }
}