/* Abdugofforov Blog - Premium Design System */

/* ============================================================
   ABDUGOFFOROV — CYBER MEDICAL (Dark Mode)
   Deep space dark background with vibrant neon accents
   ============================================================ */
:root, [data-theme="dark"] {
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #12121a;
    --bg-color: #0a0a0f;
    --card-bg: rgba(18, 18, 26, 0.65);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #475569;
    --accent-color: #6366f1; /* Indigo */
    --accent-hover: #8b5cf6; /* Violet */
    --border-color: rgba(99, 102, 241, 0.2);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    
    /* Premium Glassmorphism Settings */
    --glass-bg: rgba(18, 18, 26, 0.4);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-highlight: rgba(255, 255, 255, 0.02);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --backdrop-blur: blur(12px);
    
    /* New purple/pale blue variables */
    --color-purple-light: #818cf8;
    --grad-primary: linear-gradient(135deg, #6366f1, #ec4899); /* Indigo to Pink */
    --grad-primary-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(236, 72, 153, 0.15));
    --grad-text: linear-gradient(135deg, #a78bfa, #38bdf8);
}

/* ============================================================
   KUNDUZGI REJIM — Zamonaviy yorqin binafsha + qizil + och ko'k + oq
   Premium, futuristik, hayotiy ranglar
   ============================================================ */
[data-theme="light"] {
    --color-bg-primary: #F8F9FF;
    --color-bg-secondary: #ffffff;
    --bg-color: #F8F9FF;
    --card-bg: rgba(255, 255, 255, 0.82);
    --text-primary: #1E1B4B;
    --text-secondary: #4338CA;
    --text-muted: #6366F1;
    --accent-color: #7C3AED;
    --accent-hover: #A855F7;
    --border-color: rgba(124, 58, 237, 0.18);
    --shadow-sm: 0 4px 24px rgba(124, 58, 237, 0.10);
    --shadow-md: 0 10px 48px rgba(124, 58, 237, 0.12);
    --shadow-lg: 0 20px 64px rgba(124, 58, 237, 0.16);

    /* Premium Glassmorphism Settings — kristal oq shisha */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(124, 58, 237, 0.12);
    --glass-border-hover: rgba(124, 58, 237, 0.30);
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.08);
    --glass-blur: 16px;
    --backdrop-blur: blur(16px);

    /* Zamonaviy rang palitasi */
    --color-purple: #7C3AED;
    --color-purple-light: #8B5CF6;
    --color-red: #EF4444;
    --color-red-light: #F87171;
    --color-blue: #38BDF8;
    --color-blue-light: #7DD3FC;
    --color-silver: #4338CA;
    --color-silver-bright: #1E1B4B;
    --color-silver-dim: #6366F1;

    /* Yorqin gradientlar — binafsha → qizil → och ko'k */
    --grad-primary: linear-gradient(135deg, #7C3AED, #EF4444, #38BDF8);
    --grad-primary-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(239, 68, 68, 0.08), rgba(56, 189, 248, 0.10));
    --grad-text: linear-gradient(135deg, #7C3AED, #EF4444);

    /* Glow effektlar */
    --glow-purple: 0 0 20px rgba(124, 58, 237, 0.25), 0 0 40px rgba(124, 58, 237, 0.10);
    --glow-red: 0 0 20px rgba(239, 68, 68, 0.20);
    --glow-blue: 0 0 20px rgba(56, 189, 248, 0.20);

    /* Qo'shimcha toklar */
    --tag-bg: rgba(124, 58, 237, 0.06);
    --modal-bg: rgba(255, 255, 255, 0.96);
    --transition-speed: 0.3s;
    --container-pad: 20px;
}

/* Base Settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sayt mobil/vebda yon tomonga sira surulmaydigan bo'lsin */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none; /* iOS/Android'da chap-o'ng "bounce" ham bo'lmasin */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}

/* Gradient mesh fon (olib tashlandi) */

/* Particles canvas — hero ortida joylashadi */
.particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-inline: var(--container-pad);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

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

.animate-fade-in {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}