/* CSS Variables for Theming */

:root {
    /* Light theme colors - from retro-tropical.gif palette */
    --bg-primary: rgba(255, 200, 150, 0.3);
    --text-primary: #2d1810;
    --bg-secondary: rgba(255, 220, 180, 0.85);
    --border-color: #d97638;
    --text-secondary: #5a3a20;
    --bg-content: rgba(255, 235, 200, 0.9);
    --accent-color: #d97638;
    --accent-hover: #ff8c42;

    /* Retro element colors */
    --marquee-bg-1: #ff6b6b;
    --marquee-bg-2: #4ecdc4;
    --marquee-bg-3: #45b7d1;
    --construction-bg: #ffcc00;
    --construction-text: #000;
    --nav-bg-light: #e6e6e6;
    --nav-bg-dark: #cccccc;
    --nav-border: #999;
    --webring-bg: #f0f0f0;
    --link-blue: #0000ff;
    --link-red: #ff0000;

    /* Project backgrounds */
    --project-bg: #f9f9f9;

    /* Badge colors */
    --html-border: #e34c26;
    --css-border: #1572b6;
    --js-border: #f7df1e;

    /* ASCII art colors */
    --ascii-color: #00ff00;
    --ascii-glow: 0 0 5px #00ff00;

    /* Award badge colors */
    --award-bg-start: #ffd700;
    --award-bg-end: #ffed4e;
    --award-border: #b8860b;

    /* Pixel divider colors */
    --pixel-divider-color: #ff00ff;

    /* Quote box colors */
    --quote-bg: #222;
    --quote-border: #ff69b4;
    --quote-text-color: #ff69b4;
    --quote-author-color: #ccc;

    /* Business card colors - tropical sunset theme */
    --card-bg-start: rgba(255, 180, 100, 0.9);
    --card-bg-end: rgba(255, 220, 150, 0.9);
    --card-border: #d97638;
    --card-header-bg: #d97638;
    --card-header-text: #fff5e6;
    --card-name-color: #2d1810;
    --card-title-color: #5a3a20;
    --card-contact-color: #3d2415;
    --card-contact-hover: #ff8c42;
    --card-tagline-opacity: 0.9;

    /* Neon glow color */
    --neon-color: #39ff14;

    --tab-text-color: #a855f7;
    --tab-bg: #e0e0e0;
    --tab-border: #ccc;
    --tab-bg-active: #ccc;
    --tab-border-active: #e0e0e0;
}

/* Dark theme variables - from pixel-ocean.gif palette */
.dark-theme {
    --bg-primary: rgba(40, 20, 60, 0.3);
    --text-primary: #e8d4ff;
    --bg-secondary: rgba(60, 30, 90, 0.85);
    --border-color: #a855f7;
    --text-secondary: #d4b8ff;
    --bg-content: rgba(50, 25, 75, 0.9);
    --accent-color: #a855f7;
    --accent-hover: #c084fc;

    --webring-bg: #444;
    --link-blue: #0000ff;
    --link-red: #ff0000;

    --project-bg: #3a3a3a;

    --ascii-glow: 0 0 5px #00ff00;

    --quote-bg: #1a1a1a;
    --quote-border: #ff69b4;

    --card-bg-start: rgba(80, 40, 120, 0.9);
    --card-bg-end: rgba(100, 50, 150, 0.9);
    --card-border: #a855f7;
    --card-header-bg: #7c3aed;
    --card-header-text: #f3e8ff;
    --card-name-color: #f3e8ff;
    --card-title-color: #e8d4ff;
    --card-contact-color: #d4b8ff;

    --tab-text-color: #0000ff;
    --tab-bg: #a855f7;
    --tab-border: #0000ff;
    --tab-bg-active: #0000ff;
    --tab-border-active: #a855f7;
}