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

:root {
    --primary-light: #2563eb;
    --primary-dark: #60a5fa;
    --accent-green: #22c55e;
}

body {
    font-family: 'Inter', sans-serif;
    @apply antialiased;
}

/* Glassmorphism Logic */
.glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Typography for Editors */
textarea, .mono-font {
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: -0.02em;
}

#output-css {
    white-space: pre !important;
    overflow-x: auto !important;
}

/* Custom Form Controls */
input[type="radio"], input[type="checkbox"] {
    @apply w-5 h-5 cursor-pointer transition-all border-2 border-gray-300 dark:border-slate-600 appearance-none rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-500 relative;
}

input[type="checkbox"] {
    @apply rounded-md;
}

input[type="radio"]:checked::after, input[type="checkbox"]:checked::after {
    content: '';
    @apply absolute inset-0 flex items-center justify-center text-white text-[10px];
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Main Action Button */
.btn-primary-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* View Density Support - Using !important to override Tailwind utility classes */
.compact-view main { 
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.compact-view .HeroSection { 
    display: none !important; 
}

.compact-view textarea { 
    height: 180px !important; 
}

.compact-view #editor-wrapper {
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.compact-view .mt-16, .compact-view .mt-12, .compact-view .mb-12, .compact-view .mb-8, .compact-view .mt-10 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.compact-view .glass-card {
    padding: 1rem !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { @apply bg-gray-300 dark:bg-slate-700 rounded-full; }

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

.animate-modal {
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}