/* Utility Styles - Light Theme */

/* Card styles with shadows (replacing glassmorphism) */
.glass {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    display: inline-flex;
}

.glass-dark {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-default);
}

.glass-content {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.glass-hover:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

/* Text Effects - Light theme */
.text-glow {
    text-shadow: none;
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent-primary), #6366F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Headlines */
.headline {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: none;
}

.sub-headline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-primary);
    max-width: 600px;
    margin: 1.5rem auto 0;
    font-weight: 600;
}

.accent-text {
    color: var(--accent-primary);
}

/* Fade In Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Body scroll lock during animation */
body.animation-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Transparent sections */
section {
    position: relative;
    background: transparent;
}

/* Content sections */
.content-section {
    position: relative;
    z-index: 2;
}

/* Page transition overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.page-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.page-transition-overlay .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ======================================
   Tailwind Color Class Overrides
   Override dark-mode classes for light theme
   ====================================== */

/* Text Colors - Override dark theme defaults */
.text-white {
    color: var(--text-primary) !important;
}

/* Exception: Preserve white text on colored button backgrounds */
button.bg-blue-600.text-white,
button.bg-blue-500.text-white,
button.bg-green-500.text-white,
button.bg-indigo-600.text-white,
.tab-panel button.text-white,
[class*="bg-blue-600"] {
    color: white !important;
}

.text-gray-100,
.text-gray-200 {
    color: var(--text-primary) !important;
}

.text-gray-300,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Accent text colors - Use indigo */
.text-blue-400,
.text-blue-300,
.text-purple-400,
.text-purple-300 {
    color: var(--accent-primary) !important;
}

/* Background Colors - Card styles */
.bg-gray-800\/40,
.bg-gray-800\/50,
.bg-gray-900\/40,
.bg-gray-900\/50 {
    background: var(--bg-elevated) !important;
    box-shadow: var(--shadow-sm);
}

/* Blue tinted backgrounds */
.bg-blue-900\/10,
.bg-blue-900\/15,
.bg-blue-900\/20 {
    background: rgba(79, 70, 229, 0.06) !important;
}

.bg-blue-500\/10 {
    background: rgba(79, 70, 229, 0.1) !important;
}

/* Border Colors */
.border-gray-700\/50,
.border-gray-700,
.border-gray-600 {
    border-color: var(--border-default) !important;
}

.border-blue-500\/20,
.border-blue-500\/30 {
    border-color: rgba(79, 70, 229, 0.2) !important;
}

.border-white\/10,
.border-white\/20 {
    border-color: var(--border-subtle) !important;
}

/* Hover states - use indigo accents */
.hover\:border-blue-500\/20:hover,
.hover\:border-blue-500\/30:hover {
    border-color: rgba(79, 70, 229, 0.3) !important;
}

.hover\:text-blue-400:hover,
.hover\:text-blue-300:hover {
    color: var(--accent-primary-hover) !important;
}

.hover\:bg-blue-900\/15:hover {
    background: rgba(79, 70, 229, 0.08) !important;
}

/* Get Started Section Overrides */
#get-started {
    background: var(--bg-secondary) !important;
}

#get-started h3 {
    color: var(--text-primary);
}

#get-started .bg-gray-800\/40 {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

/* Ensure feature tabs have proper styling */
.tab-panel h4,
.tab-panel .text-2xl {
    color: var(--text-primary) !important;
}

.tab-panel .text-lg,
.tab-panel .text-base {
    color: var(--text-secondary) !important;
}