/* Docs Portal - Custom Styles */
/* Only styles that cannot be achieved with Tailwind CDN */

/* Theme CSS Variables */
:root {
    --docs-bg: #f8fafc;
    --docs-header: rgba(255, 255, 255, 0.95);
    --docs-border: rgba(0, 0, 0, 0.1);
    --docs-card: rgba(0, 0, 0, 0.03);
    --docs-dropdown: #ffffff;
    --docs-text: #1e293b;
    --docs-muted: #64748b;
}

.dark {
    --docs-bg: #0f1419;
    --docs-header: rgba(15, 20, 25, 0.95);
    --docs-border: rgba(255, 255, 255, 0.1);
    --docs-card: rgba(255, 255, 255, 0.05);
    --docs-dropdown: #1a2029;
    --docs-text: #f1f5f9;
    --docs-muted: rgba(255, 255, 255, 0.6);
}

/* Aurora background effect - dark mode */
.dark .docs-aurora-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(70, 144, 205, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(70, 144, 205, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(58, 122, 184, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0a0e1a 0%, #111827 50%, #0f1419 100%);
    z-index: -2;
    pointer-events: none;
}

/* Aurora background effect - light mode */
.docs-aurora-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(70, 144, 205, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(70, 144, 205, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(58, 122, 184, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    z-index: -2;
    pointer-events: none;
}