:root {
    /* Light theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: rgba(255, 255, 255, 0.9);
    --text-primary: #333333;
    --text-secondary: #444444;
    --border-color: #eaeaea;
    --icon-bg: #f0f0f0;
    --icon-color: #666666;
    --heading-color: #333333;
    --copyright-secondary: #444444;
    --color-code-bg: #f0f0f0;
    --color-code-text: #333333;
    --icon-filter: brightness(0) saturate(100%) invert(26%) sepia(0%) saturate(0%) hue-rotate(147deg) brightness(96%) contrast(97%);
    --button-bg: #333333;
    --button-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --bg-hover: #f0f0f0;  /* Light gray for light mode */
}

[data-theme="dark"] {
    /* Dark theme */
    --bg-primary: #1a1a1a;
    --bg-secondary: rgba(26, 26, 26, 0.9);
    --text-primary: #ffffff;
    --text-secondary: #dddddd;
    --border-color: #333333;
    --icon-bg: #333333;
    --icon-color: #ffffff;
    --heading-color: #ffffff;
    --copyright-secondary: #ffffff;
    --color-code-bg: #333333;
    --color-code-text: #ffffff;
    --icon-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(147deg) brightness(100%) contrast(100%);
    --button-bg: #ffffff;
    --button-text: #1a1a1a;
    --shadow-color: rgba(255, 255, 255, 0.05);  /* Lighter shadow for dark mode */
    --bg-hover: #333333;  /* Lighter gray for dark mode */
}