/**
 * Lahochi System - CSS 變數系統
 * 調整顏色和間距只需修改此檔案
 */

:root {
    /* ========================================
       前台配色系統 - 淺藍色主題
       ======================================== */
    
    /* 主色調 - 藍色系 */
    --color-primary: #2C5F8D;           /* 深藍（Header/Footer） */
    --color-primary-dark: #1E4563;      /* 更深的藍（Hover） */
    --color-primary-light: #4A90E2;     /* 中藍 */
    --color-secondary: #5DADE2;         /* 亮藍（強調） */
    
    /* 背景色 */
    --color-bg-body: #E8F4F8;           /* 淺藍背景（Main） */
    --color-bg-white: #FFFFFF;          /* 白色（卡片） */
    --color-bg-light: #F8FBFD;          /* 極淺藍 */
    --color-bg-dark: #1A3A52;           /* 深藍背景 */
    
    /* 文字顏色 */
    --color-text-primary: #333333;      /* 主要文字 */
    --color-text-secondary: #666666;    /* 次要文字 */
    --color-text-light: #999999;        /* 淺色文字 */
    --color-text-white: #FFFFFF;        /* 白色文字 */
    
    /* 狀態顏色 */
    --color-success: #4CAF50;           /* 成功（綠色） */
    --color-warning: #FF9800;           /* 警告（橙色） */
    --color-error: #F44336;             /* 錯誤（紅色） */
    --color-info: #2196F3;              /* 資訊（藍色） */
    
    /* 課程類型顏色 */
    --color-course-oneday: #4CAF50;     /* 一日課（綠色） */
    --color-course-facilitator: #9C27B0; /* 導師課（紫色） */
    
    /* 邊框顏色 */
    --color-border: #E0E0E0;            /* 一般邊框 */
    --color-border-light: #F0F0F0;      /* 淺色邊框 */
    --color-border-dark: #CCCCCC;       /* 深色邊框 */
    
    /* 陰影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    
    /* ========================================
       排版系統
       ======================================== */
    
    /* 字體家族 */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                        "Microsoft JhengHei", "微軟正黑體", 
                        "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "Courier New", Courier, monospace;
    
    /* 字體大小 */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* 字重 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========================================
       間距系統（使用 8px 基礎）
       ======================================== */
    
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    
    /* ========================================
       圓角系統
       ======================================== */
    
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;  /* 完全圓形 */
    
    /* ========================================
       過渡動畫
       ======================================== */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* ========================================
       Z-index 層級
       ======================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ========================================
       容器寬度
       ======================================== */
    
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* ========================================
       響應式斷點（用於媒體查詢）
       ======================================== */
    
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ========================================
   後台配色覆蓋（在 admin.css 中使用）
   ======================================== */

.admin-theme {
    --color-primary: #F4D03F;           /* 淺黃 */
    --color-primary-dark: #D4B72E;      /* 深黃 */
    --color-primary-light: #F9E79F;     /* 亮黃 */
    --color-bg-body: #FFFAED;           /* 淺黃背景 */
    --color-bg-white: #FFFFFF;
}

/* ========================================
   Dark Mode（未來擴充用）
   ======================================== */

@media (prefers-color-scheme: dark) {
    .dark-mode {
        --color-bg-body: #1A1A1A;
        --color-bg-white: #2D2D2D;
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #CCCCCC;
        --color-border: #404040;
    }
}

/* ========================================
   列印樣式覆蓋
   ======================================== */

@media print {
    :root {
        --color-primary: #000000;
        --shadow-md: none;
        --shadow-lg: none;
    }
}