/**
 * CSS 變數統一定義檔案
 * Unified CSS Variables Definition
 * 
 * 建立日期: 2025-12-25
 * 說明: 集中管理所有 CSS 變數，避免多檔案重複定義
 */

/* ============================================================================
   全域 CSS 變數 - 統一定義
   ============================================================================ */
:root {
    /* ========================================
       斷點變數 Breakpoint Variables
       從 responsive.css 提取
       ======================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1440px;
    --breakpoint-xxl: 1920px;
    
    /* Container max-widths */
    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1200px;
    --container-xxl: 1400px;

    /* ========================================
       主色調 - 柔和粉紫 (Soft Lavender)
       從 frontend-pastel.css 提取
       ======================================== */
    --primary-50: #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7e22ce;
    --primary-800: #6b21a8;
    --primary-900: #581c87;

    /* ========================================
       輔助色 - 柔和粉紅 (Soft Pink)
       ======================================== */
    --accent-50: #fdf2f8;
    --accent-100: #fce7f3;
    --accent-200: #fbcfe8;
    --accent-300: #f9a8d4;
    --accent-400: #f472b6;
    --accent-500: #ec4899;
    --accent-600: #db2777;
    --accent-700: #be185d;
    --accent-800: #9d174d;
    --accent-900: #831843;

    /* ========================================
       點綴色 - 薄荷綠 (Mint Green)
       ======================================== */
    --mint-50: #f0fdf4;
    --mint-100: #dcfce7;
    --mint-200: #bbf7d0;
    --mint-300: #86efac;
    --mint-400: #4ade80;
    --mint-500: #22c55e;
    --mint-600: #16a34a;

    /* ========================================
       天空藍 (Sky Blue)
       ======================================== */
    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;

    /* ========================================
       中性色 - 非常淡的灰
       ======================================== */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #eeeeee;
    --neutral-300: #e0e0e0;
    --neutral-400: #bdbdbd;
    --neutral-500: #9e9e9e;
    --neutral-600: #757575;
    --neutral-700: #616161;
    --neutral-800: #424242;
    --neutral-900: #212121;

    /* ========================================
       語義化顏色 Semantic Colors
       ======================================== */
    --success-500: #22c55e;
    --danger-500: #f43f5e;
    --warning-500: #f59e0b;
    --info-500: #38bdf8;

    /* ========================================
       漸變定義 Gradients
       ======================================== */
    --gradient-primary: linear-gradient(135deg, #e9d5ff 0%, #fce7f3 100%);
    --gradient-accent: linear-gradient(135deg, #fbcfe8 0%, #fed7aa 100%);
    --gradient-bg: linear-gradient(135deg, #fdf2f8 0%, #f0f9ff 25%, #f0fdf4 50%, #fef3c7 75%, #fdf2f8 100%);
    --gradient-hero: linear-gradient(135deg, #e9d5ff 0%, #fbcfe8 50%, #fed7aa 100%);

    /* ========================================
       陰影定義 Shadows
       ======================================== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.1);

    /* ========================================
       圓角定義 Border Radius
       ======================================== */
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ========================================
       間距定義 Spacing
       ======================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* ========================================
       轉場效果 Transitions
       ======================================== */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* ========================================
       字體定義 Fonts
       ======================================== */
    --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}