/* ============================================================
   Theme System — CSS Custom Property Definitions
   Load BEFORE styles.css so variables are available.
   ============================================================ */

/* Smooth theme transition on all elements */
*,
*::before,
*::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Arpi alap (default light theme) ─────────────────────────
   Extracted from current styles.css colors.
   :root ensures fallback even without data-theme attribute. */
:root,
[data-theme="arpi-alap"] {
    /* Backgrounds */
    --color-bg-primary: #f5f5f5;
    --color-bg-surface: #ffffff;
    --color-bg-header: #2c3e50;
    --color-bg-footer: #2c3e50;
    --color-bg-hover: #f8f9fa;
    --color-bg-input: #ffffff;
    --color-bg-table-header: #f8f9fa;
    --color-bg-code: #f4f4f4;
    --color-bg-card: #ffffff;

    /* Text */
    --color-text-primary: #333333;
    --color-text-secondary: #555555;
    --color-text-muted: #666666;
    --color-text-disabled: #999999;
    --color-text-on-header: #ffffff;
    --color-text-on-footer: #ffffff;
    --color-text-heading: #2c3e50;
    --color-text-link: #3498db;

    /* Accent / Brand */
    --color-accent-primary: #3498db;
    --color-accent-primary-hover: #2980b9;
    --color-accent-secondary: #6c757d;
    --color-accent-secondary-hover: #5a6268;

    /* Status */
    --color-status-success: #27ae60;
    --color-status-success-bg: #d4edda;
    --color-status-success-border: #c3e6cb;
    --color-status-success-text: #155724;
    --color-status-danger: #e74c3c;
    --color-status-danger-bg: #f8d7da;
    --color-status-danger-border: #f5c6cb;
    --color-status-danger-text: #721c24;
    --color-status-danger-hover: #c0392b;
    --color-status-warning: #f59e0b;
    --color-status-warning-bg: #fff3cd;
    --color-status-warning-border: #ffc107;
    --color-status-warning-text: #856404;
    --color-status-info: #0891b2;
    --color-status-info-bg: #cffafe;
    --color-status-info-text: #0c5460;

    /* Special-purpose accent colors */
    --color-accent-orange: #e67e22;
    --color-accent-indigo: #6366f1;
    --color-accent-rose: #f43f5e;
    --color-accent-orange-unselected: #f97316;
    --color-accent-orange-unselected-bg: #fff7ed;

    /* Borders */
    --color-border: #dddddd;
    --color-border-light: #eeeeee;
    --color-border-input: #dee2e6;

    /* Shadows */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-heavy: rgba(0, 0, 0, 0.3);

    /* Glow (no glow for light theme) */
    --color-glow: transparent;
    --color-glow-secondary: transparent;
}


/* ── Szemkimelo sotet (warm dark, easy on eyes) ──────────── */
[data-theme="szemkimelo-sotet"] {
    /* Backgrounds */
    --color-bg-primary: #1e1e2a;
    --color-bg-surface: #2a2a3c;
    --color-bg-header: #16162a;
    --color-bg-footer: #16162a;
    --color-bg-hover: #32324a;
    --color-bg-input: #252538;
    --color-bg-table-header: #252538;
    --color-bg-code: #252538;
    --color-bg-card: #2a2a3c;

    /* Text */
    --color-text-primary: #e0ddd5;
    --color-text-secondary: #b8b4aa;
    --color-text-muted: #8a8680;
    --color-text-disabled: #6a6660;
    --color-text-on-header: #e0ddd5;
    --color-text-on-footer: #b8b4aa;
    --color-text-heading: #e0ddd5;
    --color-text-link: #c49a6c;

    /* Accent / Brand */
    --color-accent-primary: #c49a6c;
    --color-accent-primary-hover: #d4aa7c;
    --color-accent-secondary: #8b7355;
    --color-accent-secondary-hover: #9b8365;

    /* Status (slightly desaturated for comfort) */
    --color-status-success: #4a9e6e;
    --color-status-success-bg: #1e3a2a;
    --color-status-success-border: #2a5a3a;
    --color-status-success-text: #7dcea0;
    --color-status-danger: #d45a4a;
    --color-status-danger-bg: #3a1e1e;
    --color-status-danger-border: #5a2a2a;
    --color-status-danger-text: #e8a0a0;
    --color-status-danger-hover: #b04030;
    --color-status-warning: #d4a040;
    --color-status-warning-bg: #3a3018;
    --color-status-warning-border: #5a4a20;
    --color-status-warning-text: #e0c070;
    --color-status-info: #5a9aaa;
    --color-status-info-bg: #1e2a3a;
    --color-status-info-text: #8ac0d0;

    /* Special-purpose accent colors */
    --color-accent-orange: #d4884a;
    --color-accent-indigo: #818cf8;
    --color-accent-rose: #fb7185;
    --color-accent-orange-unselected: #d4884a;
    --color-accent-orange-unselected-bg: #3a2a18;

    /* Borders */
    --color-border: #3a3a4c;
    --color-border-light: #32324a;
    --color-border-input: #3a3a4c;

    /* Shadows */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-heavy: rgba(0, 0, 0, 0.5);

    /* Glow */
    --color-glow: transparent;
    --color-glow-secondary: transparent;
}


/* ── Cyberpunk (Ghost In The Shell / Blade Runner neon) ──── */
[data-theme="cyberpunk"] {
    /* Backgrounds */
    --color-bg-primary: #0a0a12;
    --color-bg-surface: #14141f;
    --color-bg-header: #0d0d1a;
    --color-bg-footer: #0d0d1a;
    --color-bg-hover: #1a1a2e;
    --color-bg-input: #12121e;
    --color-bg-table-header: #12121e;
    --color-bg-code: #12121e;
    --color-bg-card: #14141f;

    /* Text */
    --color-text-primary: #e0e0e8;
    --color-text-secondary: #a0a0b0;
    --color-text-muted: #707088;
    --color-text-disabled: #505068;
    --color-text-on-header: #e0e0e8;
    --color-text-on-footer: #a0a0b0;
    --color-text-heading: #e0e0e8;
    --color-text-link: #ff6b35;

    /* Accent / Brand */
    --color-accent-primary: #ff6b35;
    --color-accent-primary-hover: #ff8855;
    --color-accent-secondary: #ff2d7a;
    --color-accent-secondary-hover: #ff5090;

    /* Status */
    --color-status-success: #00cc66;
    --color-status-success-bg: #0a2a1a;
    --color-status-success-border: #00cc66;
    --color-status-success-text: #66ff99;
    --color-status-danger: #ff3355;
    --color-status-danger-bg: #2a0a0a;
    --color-status-danger-border: #ff3355;
    --color-status-danger-text: #ff8899;
    --color-status-danger-hover: #cc2244;
    --color-status-warning: #ffaa00;
    --color-status-warning-bg: #2a2000;
    --color-status-warning-border: #ffaa00;
    --color-status-warning-text: #ffcc55;
    --color-status-info: #00aaff;
    --color-status-info-bg: #0a1a2a;
    --color-status-info-text: #66ccff;

    /* Special-purpose accent colors */
    --color-accent-orange: #ff8844;
    --color-accent-indigo: #818cf8;
    --color-accent-rose: #ff5577;
    --color-accent-orange-unselected: #ff8844;
    --color-accent-orange-unselected-bg: #2a1500;

    /* Borders */
    --color-border: #1a1a2e;
    --color-border-light: #14141f;
    --color-border-input: #2a2a3e;

    /* Shadows */
    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-shadow-heavy: rgba(0, 0, 0, 0.6);

    /* Glow */
    --color-glow: rgba(255, 107, 53, 0.3);
    --color-glow-secondary: rgba(255, 45, 122, 0.3);
}

/* Cyberpunk glow effects — subtle, professional */
[data-theme="cyberpunk"] .btn:hover,
[data-theme="cyberpunk"] button:hover {
    box-shadow: 0 0 10px var(--color-glow);
}

[data-theme="cyberpunk"] header {
    border-bottom: 1px solid var(--color-accent-primary);
    box-shadow: 0 2px 10px var(--color-glow);
}

[data-theme="cyberpunk"] input:focus,
[data-theme="cyberpunk"] select:focus,
[data-theme="cyberpunk"] textarea:focus {
    box-shadow: 0 0 8px var(--color-glow);
    border-color: var(--color-accent-primary);
}

[data-theme="cyberpunk"] .nav-link.active,
[data-theme="cyberpunk"] .nav-link:hover {
    text-shadow: 0 0 8px var(--color-glow);
}


/* ── Viragoskert (garden/floral, medium-light) ──────────── */
[data-theme="viragoskert"] {
    /* Backgrounds */
    --color-bg-primary: #faf7f2;
    --color-bg-surface: #ffffff;
    --color-bg-header: #5c7a6b;
    --color-bg-footer: #5c7a6b;
    --color-bg-hover: #f5f0e8;
    --color-bg-input: #ffffff;
    --color-bg-table-header: #f5f0e8;
    --color-bg-code: #f5f0e8;
    --color-bg-card: #ffffff;

    /* Text */
    --color-text-primary: #4a3728;
    --color-text-secondary: #6b5744;
    --color-text-muted: #8a7a68;
    --color-text-disabled: #a09888;
    --color-text-on-header: #faf7f2;
    --color-text-on-footer: #e8ddd0;
    --color-text-heading: #4a3728;
    --color-text-link: #d4869c;

    /* Accent / Brand */
    --color-accent-primary: #d4869c;
    --color-accent-primary-hover: #c47088;
    --color-accent-secondary: #7b9e87;
    --color-accent-secondary-hover: #6b8e77;

    /* Status */
    --color-status-success: #6b9e7b;
    --color-status-success-bg: #e8f5e8;
    --color-status-success-border: #c3e6cb;
    --color-status-success-text: #2d5a3a;
    --color-status-danger: #c45a5a;
    --color-status-danger-bg: #f8e0e0;
    --color-status-danger-border: #e0c0c0;
    --color-status-danger-text: #8b3030;
    --color-status-danger-hover: #a84040;
    --color-status-warning: #c4a040;
    --color-status-warning-bg: #f8f0d8;
    --color-status-warning-border: #e0d0a0;
    --color-status-warning-text: #7a6020;
    --color-status-info: #5a8a9a;
    --color-status-info-bg: #e0f0f5;
    --color-status-info-text: #2a5a6a;

    /* Special-purpose accent colors */
    --color-accent-orange: #c48040;
    --color-accent-indigo: #7c6bb5;
    --color-accent-rose: #c4506a;
    --color-accent-orange-unselected: #c48040;
    --color-accent-orange-unselected-bg: #f8f0e0;

    /* Borders */
    --color-border: #e8ddd0;
    --color-border-light: #f0e8da;
    --color-border-input: #e0d5c8;

    /* Shadows */
    --color-shadow: rgba(74, 55, 40, 0.08);
    --color-shadow-heavy: rgba(74, 55, 40, 0.2);

    /* Glow */
    --color-glow: transparent;
    --color-glow-secondary: transparent;
}


/* ── Footer Theme Selector Styles ────────────────────────── */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-right p {
    margin: 0;
}

.theme-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.theme-dropdown {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}

.theme-dropdown:hover {
    background: rgba(255, 255, 255, 0.2);
}

.theme-dropdown option {
    background: var(--color-bg-surface, #ffffff);
    color: var(--color-text-primary, #333333);
}