/* ============================================
   Theme System - CSS Variables
   Light (default) / Dark mode
   ============================================ */

:root,
[data-theme="light"] {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9fafb;
    --bg-hover: #f0f2f5;

    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-link: #667eea;

    --border-color: #e5e7eb;
    --border-light: #f0f2f5;

    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent-color: #667eea;
    --accent-hover: #5a6fd6;

    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --card-bg: #ffffff;

    --badge-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --badge-color: #ffffff;

    --header-bg: #ffffff;
    --header-border: #eeeeee;

    --top3-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --num-bg: #667eea;

    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;

    --input-bg: #f9fafb;
    --input-border: #e5e7eb;
    --input-color: #333333;

    --success-bg: #d4edda;
    --success-color: #155724;
    --error-bg: #f8d7da;
    --error-color: #721c24;

    --footer-border: #eeeeee;

    --sidebar-subscribe-bg: var(--accent-gradient);
    --sidebar-subscribe-color: #ffffff;

    --icp-bg: #f9fafb;
    --icp-color: #999999;

    --job-item-bg: #f9fafb;
    --job-item-hover: #f0f2f5;
    --job-tag-bg: #fff3cd;
    --job-tag-color: #856404;

    --btn-secondary-bg: #f5f7fa;
    --btn-secondary-color: #666666;
    --btn-secondary-hover: #eef0f5;

    --trend-border: #f0f2f5;
    --trend-rec-bg: #f9fafb;
    --trend-rec-border: #667eea;

    --summary-color: #888888;

    /* Scrollbar */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-tertiary: #232a3b;
    --bg-hover: #2a3347;

    --text-primary: #e8ecf8;
    --text-secondary: #9aa6c9;
    --text-tertiary: #6b7a99;
    --text-link: #7dd3fc;

    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);

    --accent-gradient: linear-gradient(135deg, #7dd3fc, #6366f1);
    --accent-color: #7dd3fc;
    --accent-hover: #60b8e6;

    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --card-bg: #1a1f2e;

    --badge-bg: linear-gradient(135deg, #7dd3fc, #6366f1);
    --badge-color: #0b1024;

    --header-bg: #1a1f2e;
    --header-border: rgba(255, 255, 255, 0.1);

    --top3-bg: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
    --num-bg: #6366f1;

    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #1a1f2e;

    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-color: #e8ecf8;

    --success-bg: #1a3a2a;
    --success-color: #6ee7b7;
    --error-bg: #3a1a1a;
    --error-color: #fca5a5;

    --footer-border: rgba(255, 255, 255, 0.1);

    --sidebar-subscribe-bg: var(--accent-gradient);
    --sidebar-subscribe-color: #0b1024;

    --icp-bg: rgba(255, 255, 255, 0.03);
    --icp-color: #6b7a99;

    --job-item-bg: #232a3b;
    --job-item-hover: #2a3347;
    --job-tag-bg: #3d3510;
    --job-tag-color: #fbbf24;

    --btn-secondary-bg: #232a3b;
    --btn-secondary-color: #9aa6c9;
    --btn-secondary-hover: #2a3347;

    --trend-border: rgba(255, 255, 255, 0.08);
    --trend-rec-bg: #232a3b;
    --trend-rec-border: #6366f1;

    --summary-color: #7a8aaa;

    --scrollbar-track: #1a1f2e;
    --scrollbar-thumb: #3a4560;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

/* Theme icon states */
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun,
:root .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon,
:root .theme-toggle .icon-moon { display: inline; }

/* Smooth transitions */
body,
.top-header,
.digest-card,
.sidebar-card,
.modal-box,
.article-item,
.job-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}