/* PapaRadar Variables Module - CSS變數定義模組 */
/* 包含：顏色系統、間距系統、字型大小、動畫設定等設計變數 */

/* ===== CSS 變數定義 ===== */
:root {
    /* 顏色系統 */
    --primary-bg: #0a0a0f;
    --secondary-bg: #1a1a2e;
    --accent-bg: #16213e;
    --card-bg: rgba(255, 255, 255, 0.05);
    --overlay-bg: rgba(0, 0, 0, 0.8);

    /* 文字顏色 */
    --text-primary: #ffffff;
    --text-secondary: #b8bcc8;
    --text-muted: #6b7280;

    /* 主題顏色 */
    --accent-color: #00d4ff;
    --success-color: #00ff88;
    --danger-color: #ff4757;
    --warning-color: #ffa502;

    /* 邊框和陰影 */
    --border-color: #2d3748;
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 212, 255, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 212, 255, 0.2);

    /* 間距系統 */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */

    /* 字型大小 */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */

    /* 圓角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* 轉場動畫 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index 層級管理 */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal: 1030;
    --z-popover: 1040;
    --z-tooltip: 1050;
    --z-toast: 1060;

    /* 響應式斷點 (供 JavaScript 使用) */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1440px;

    /* 佈局變數 */
    --container-max-width: 1400px;
    --sidebar-width: 280px;
    --sidebar-width-mobile: 100%;
    --header-height: 60px;
    --footer-height: 40px;

    /* 圖表相關顏色 */
    --chart-positive: var(--success-color);
    --chart-negative: var(--danger-color);
    --chart-neutral: var(--text-secondary);
    --chart-grid: var(--border-color);
    --chart-axis: var(--text-muted);

    /* 狀態顏色 */
    --status-info: #3b82f6;
    --status-warning: var(--warning-color);
    --status-error: var(--danger-color);
    --status-success: var(--success-color);

    /* 表格顏色 */
    --table-header-bg: var(--accent-bg);
    --table-row-hover: rgba(255, 255, 255, 0.05);
    --table-border: var(--border-color);

    /* 按鈕顏色變數 */
    --btn-primary-bg: var(--accent-color);
    --btn-primary-hover: #00b8e6;
    --btn-secondary-bg: var(--card-bg);
    --btn-secondary-hover: rgba(255, 255, 255, 0.1);
    --btn-danger-bg: var(--danger-color);
    --btn-danger-hover: #e63946;
    --btn-success-bg: var(--success-color);
    --btn-success-hover: #28a745;

    /* 輸入框顏色 */
    --input-bg: var(--primary-bg);
    --input-border: var(--border-color);
    --input-border-focus: var(--accent-color);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);

    /* 載入動畫顏色 */
    --loading-primary: var(--accent-color);
    --loading-secondary: var(--text-muted);

    /* 滾動條顏色 */
    --scrollbar-track: var(--primary-bg);
    --scrollbar-thumb: var(--border-color);
    --scrollbar-thumb-hover: var(--accent-color);
}

/* ===== 深色主題變數 (預設) ===== */
/* 目前已經是深色主題，可以在未來擴展亮色主題 */

/* ===== 主題切換準備 ===== */
[data-theme="light"] {
    /* 預留亮色主題變數位置 */
    /* 可以在未來需要時添加亮色主題變數 */
}

/* ===== 高對比度主題 ===== */
[data-theme="high-contrast"] {
    --primary-bg: #000000;
    --text-primary: #ffffff;
    --accent-color: #ffff00;
    --border-color: #ffffff;
}

/* ===== 護眼主題 ===== */
[data-theme="eye-care"] {
    --primary-bg: #1a1a1a;
    --secondary-bg: #2a2a2a;
    --text-primary: #e0e0e0;
    --accent-color: #4ade80;
}

/* ===== 自訂屬性計算 ===== */
/* 這些會被 CSS 自動計算，無需 JavaScript */
:root {
    --content-width: calc(100% - var(--sidebar-width));
    --available-height: calc(100vh - var(--header-height));
    --mobile-safe-area: env(safe-area-inset-bottom, 0px);
}

/* ===== 列印樣式變數 ===== */
@media print {
    :root {
        --primary-bg: #ffffff;
        --text-primary: #000000;
        --border-color: #000000;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }
}