/* ============================================
   Dify RAG 系統 - CSS 變數定義
   設計系統 v2.0
   ============================================ */

:root {
  /* ========== 色彩系統 ========== */
  
  /* 主色調 - 溫暖橙 */
  --primary: #FF6B35;
  --primary-light: #FF8F66;
  --primary-dark: #E55A2B;
  --primary-50: rgba(255, 107, 53, 0.05);
  --primary-100: rgba(255, 107, 53, 0.1);
  --primary-200: rgba(255, 107, 53, 0.2);

  /* Alpha 變數 - 與基礎樣式對應 */
  --primary-alpha-5: rgba(255, 107, 53, 0.05);
  --primary-alpha-10: rgba(255, 107, 53, 0.1);
  --primary-alpha-20: rgba(255, 107, 53, 0.2);

  /* 輔助色 - 深橙 */
  --accent: #E55A2B;
  --accent-light: #FF6B35;
  --accent-dark: #CC4A1D;
  --accent-50: rgba(229, 90, 43, 0.05);
  --accent-100: rgba(229, 90, 43, 0.1);
  --accent-200: rgba(229, 90, 43, 0.2);

  /* 醒目色 - 桃紅 (用於 CTA、升級按鈕等) */
  --highlight: #DB2777;
  --highlight-light: #EC4899;
  --highlight-dark: #BE185D;
  --highlight-50: rgba(219, 39, 119, 0.05);
  --highlight-100: rgba(219, 39, 119, 0.1);
  --highlight-200: rgba(219, 39, 119, 0.2);

  /* 漸層組合 (Style 3: 純色覆寫) */
  --gradient-cta: var(--primary);
  --gradient-cta-hover: var(--primary-dark);

  /* 中性色系 */
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* 語義色彩 */
  --success: #10B981;
  --success-light: #34D399;
  --success-dark: #059669;
  --success-alpha-10: rgba(16, 185, 129, 0.1);
  --success-alpha-20: rgba(16, 185, 129, 0.2);

  --warning: #F59E0B;
  --warning-light: #FBBF24;
  --warning-dark: #D97706;
  --warning-alpha-10: rgba(245, 158, 11, 0.1);
  --warning-alpha-20: rgba(245, 158, 11, 0.2);

  --error: #EF4444;
  --error-light: #F87171;
  --error-dark: #DC2626;
  --error-alpha-10: rgba(239, 68, 68, 0.1);
  --error-alpha-20: rgba(239, 68, 68, 0.2);

  --info: #3B82F6;
  --info-light: #60A5FA;
  --info-dark: #2563EB;
  --info-alpha-10: rgba(59, 130, 246, 0.1);
  --info-alpha-20: rgba(59, 130, 246, 0.2);

  /* 語義色彩背景 */
  --bg-success: #ECFDF5;
  --bg-success-subtle: #F0FDF4;
  --bg-warning: #FFFBEB;
  --bg-warning-subtle: #FEFCE8;
  --bg-error: #EF4444;
  --bg-error-subtle: #FEF2F2;
  --bg-info: #EFF6FF;
  --bg-info-subtle: #F0F9FF;

  /* 語義色彩文字 */
  --text-success: #065F46;
  --text-warning: #92400E;
  --text-error: #991B1B;
  --text-info: #1E40AF;

  /* 語義色彩邊框 */
  --border-success: #A7F3D0;
  --border-warning: #FDE68A;
  --border-error: #FECACA;
  --border-info: #BFDBFE;

  /* ========== 背景和文字 ========== */

  /* 淺色主題 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --surface: #FFFFFF;
  --background: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --border-color: #E5E7EB;
  --shadow-color: rgba(15, 23, 42, 0.1);

  /* ========== 間距系統 ========== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;

  /* ========== 字型系統 ========== */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  --font-family-zh: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', sans-serif;

  /* 字體大小 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* 字體粗細 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* 行高 */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ========== 陰影系統 (Style 3: Friendly Minimalism - 柔和陰影) ========== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06), 0 8px 10px rgba(0, 0, 0, 0.02);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);

  /* ========== 圓角系統 ========== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ========== 動畫系統 ========== */

  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easing */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-friendly: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transition 速記 (duration + easing 組合) */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 入場動畫參數 */
  --enter-translate-y: 12px;
  --enter-scale: 0.96;
  --stagger-delay: 60ms;

  /* ========== 響應式斷點 ========== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ========== Z-index 層級 ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-editor-overlay: 9999;
  --z-editor-modal: 10001;
  --z-toast: 10100;

  /* ========== 元件語義 Token (Style 3: Friendly Minimalism) ========== */

  /* 卡片 */
  --card-bg: var(--bg-primary);
  --card-border: 1px solid var(--border-color);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-sm);
  --card-padding: var(--space-lg);

  /* 輸入框 */
  --input-bg: var(--bg-primary);
  --input-border: 1px solid var(--border-color);
  --input-radius: var(--radius-lg);
  --input-padding-x: var(--space-md);
  --input-padding-y: 12px;
  --input-focus-ring: 0 0 0 3px var(--primary-alpha-10);

  /* 按鈕 */
  --btn-radius: 10px;
  --btn-primary-bg: var(--primary);
  --btn-primary-bg-hover: var(--primary-dark);
  --btn-shadow: var(--shadow-xs);
  --btn-shadow-hover: var(--shadow-sm);

  /* Modal */
  --modal-radius: var(--radius-xl);
  --modal-padding: var(--space-lg);

  /* Hover 統一 */
  --hover-lift: translateY(-1px);
  --hover-shadow: var(--shadow-sm);
  --hover-transition: all var(--duration-normal) var(--ease-out);

  /* Tab (底線風格) */
  --tab-indicator: 2px solid var(--primary);
  --tab-active-color: var(--primary);

  /* 升級按鈕 */
  --upgrade-bg: #8B5CF6;
  --upgrade-bg-hover: #7C3AED;
  --upgrade-border: #8B5CF6;
  --upgrade-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
  --upgrade-shadow-hover: 0 4px 12px rgba(139, 92, 246, 0.25);
}

/* ========== 深色主題變數 ========== */
[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --surface: #1E293B;
  --background: #0F172A;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --border-color: #475569;
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* 語義 Token 深色覆寫 */
  --card-bg: var(--bg-secondary);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.25);
  --input-bg: var(--bg-tertiary);
  --input-focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.2);
  --hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  --upgrade-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  --upgrade-shadow-hover: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* ========== 高對比度支援 ========== */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-primary: #000000;
    --text-secondary: #333333;
  }
}

/* ========== 減少動畫偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --enter-translate-y: 0px;
    --enter-scale: 1;
    --stagger-delay: 0ms;
  }
}