/* ================= CSS Variables (Dark & Light Mode) ================= */
:root {
    --bg-color: #121212;
    --text-color: #f8f9fa;
    --nav-bg: #1f1f1f;
    --border-color: #333333;
    --primary-color: #3d8bfd;
    --hover-color: #6ea8fe;
    --footer-text: #adb5bd;
}

[data-theme="dark"] {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --nav-bg: #ffffff;
    --border-color: #dee2e6;
    --primary-color: #0d6efd;
    --hover-color: #0b5ed7;
    --footer-text: #6c757d;
}

/* ================= Reset & Base ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}