/* CSS Variables for Theme Management */
:root {
    /* Primary Colors */
    --primary-color: #41b783;
    --secondary-color: #34495e;

    /* Light Theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Spacing */
    --section-padding: 5rem 0;
    --container-max-width: 1200px;

    /* Typography */
    --font-size-hero: 3.5rem;
    --font-size-large: 4rem;
    --font-size-section: 2.5rem;
    --line-height-base: 1.6;

    /* Transitions */
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    /* Border Radius */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    /* Primary 主色 */
    --bs-primary: #41b783;
    --bs-primary-rgb: 65, 183, 131;

    /* Secondary 次要色（取灰蓝对比色） */
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;

    /* Success 成功（比 primary 更偏绿，亮一点） */
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;

    /* Info 信息（偏青蓝，跟主色有区分度） */
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;

    /* Warning 警告（黄） */
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;

    /* Danger 危险（红） */
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;

    /* Light 浅色背景 */
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;

    /* Dark 深色背景 */
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;

    /* 辅助按钮颜色（Bootstrap 5.3+ 需要） */
    --bs-primary-text-emphasis: #2e7a58;
    --bs-secondary-text-emphasis: #495057;
    --bs-success-text-emphasis: #19692c;
    --bs-info-text-emphasis: #0f5e6c;
    --bs-warning-text-emphasis: #997404;
    --bs-danger-text-emphasis: #842029;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;

    --bs-primary-bg-subtle: #d1f0e3;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;

    --bs-primary-border-subtle: #a3e1c7;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
}

/* Dark Theme Variables */
[data-bs-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border-color: #404040;
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Hexagon Colors for Dark Theme */
    --hexagon-default: rgba(65, 183, 131, 0.15);
    --hexagon-hover: var(--primary-color);
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 2.5rem;
        --font-size-large: 2.8rem;
        --font-size-section: 2rem;
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-hero: 2rem;
        --font-size-large: 2.2rem;
        --font-size-section: 1.8rem;
    }
}