<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary: #1B3A5C;
            --secondary: #2E86AB;
            --accent: #D4A533;
            --bg: #f0f4f8;
            --text: #333;
            --card-bg: #fff;
            --radius: 12px;
        }
        .dark {
            --primary: #e0e0e0;
            --secondary: #64b5f6;
            --bg: #121212;
            --text: #e0e0e0;
            --card-bg: #1e1e1e;
        }
        body { font-family: Arial; padding: 20px; background: var(--bg); color: var(--text); transition: all 0.3s; text-align: center; }
        h1 { color: var(--primary); }
        .card { background: var(--card-bg); padding: 25px; border-radius: var(--radius); margin: 15px auto; max-width: 500px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
        .btn { padding: 10px 25px; background: var(--secondary); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 16px; }
        .btn:hover { background: var(--accent); }
    </style>
</head>
<body>
    <h1>CSS O'zgaruvchilar</h1>
    <button class="btn" onclick="document.body.classList.toggle('dark')">Tungi rejim</button>
    <div class="card">
        <h3>CSS Variables</h3>
        <p>Bu karta CSS o'zgaruvchilari yordamida stillangan. Tungi rejim tugmasini bosib ko'ring!</p>
    </div>
    <div class="card">
        <h3>Moslashuvchan</h3>
        <p>Bitta joyda o'zgartirsangiz, hammasi o'zgaradi!</p>
    </div>
</body>
</html>