:root {
    /* Light theme colors */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333333;
    --background-color: #ffffff;
    --card-bg-color: #fcfcfc;
    --card-background: #fcfcfc;
    --header-bg: var(--card-background);
    --footer-bg: var(--background-color);
    --border-color: rgba(var(--primary-rgb), 0.1);
    --gradient-start: #3498db;
    --gradient-end: #2ecc71;
    --link-color: #3498db;
    --button-bg: #3498db;
    --button-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --main-bg-color: #ffffff;
    --bottom-bg-color: #ffffff;
    --html-bg-color: #ffffff;

    --nav-bg: rgba(255, 255, 255, 0.9);
    --header-overlay: linear-gradient(135deg, rgba(52, 152, 219, 0.8), rgba(46, 204, 113, 0.8));
    --link-hover-color: #2980b9;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --base-font-size: 18px;
    --line-height: 1.6;

    --container-width: 1200px;
    --header-max-width: 1600px;
    --content-width: 800px;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;

    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);

    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    --header-height: 80px;

    /* RGB values for gradients and transparency */
    --primary-rgb: 52, 152, 219;
    --secondary-rgb: 46, 204, 113;
}

/* Dark Theme */
.dark-theme {
    --primary-color: #2186c4;
    --secondary-color: #27ae60;
    --primary-rgb: 33, 134, 196;
    --secondary-rgb: 39, 174, 96;
    --text-color: #f5f5f5;
    --background-color: #0f1115;
    --card-bg-color: #171a21;
    --card-background: #171a21;
    --header-bg: #0f1115;
    --footer-bg: #0f1115;
    --border-color: rgba(255, 255, 255, 0.05);
    --gradient-start: #2186c4;
    --gradient-end: #27ae60;
    --link-color: #4fa3e0;
    --button-bg: #2186c4;
    --button-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --main-bg-color: #1a1a1a;
    --bottom-bg-color: #1a1a1a;
    --html-bg-color: #121212;

    --nav-bg: rgba(26, 26, 26, 0.9);
    --header-overlay: linear-gradient(135deg, rgba(33, 134, 196, 0.8), rgba(39, 174, 96, 0.8));
    --link-hover-color: #5dade2;
}