/**
 * Design Tokens - Dark Tech Theme
 * 深色科技風格設計變數
 * 來源：Coding Tech 簡報風格分析
 *
 * 特色：
 * - 深色主題背景
 * - 柔和漸變效果
 * - 科技感色彩系統
 */

:root {
  /* ========================================
     1. 基礎色彩 (Base Colors) - OKLCH 格式
     ======================================== */

  /* 中性色調色板 - 深色模式（Hue 250，加入 2-3% 藍色色調） */
  --neutral-50: oklch(98% 0.002 250);
  --neutral-100: oklch(95% 0.002 250);
  --neutral-200: oklch(90% 0.002 250);
  --neutral-300: oklch(80% 0.002 250);
  --neutral-400: oklch(65% 0.002 250);
  --neutral-500: oklch(50% 0.002 250);
  --neutral-600: oklch(40% 0.002 250);
  --neutral-700: oklch(30% 0.002 250);
  --neutral-800: oklch(20% 0.002 250);
  --neutral-900: oklch(10% 0.002 250);

  /* 四層背景結構 - 深色模式 */
  --bg-level-1: oklch(22% 0.002 250);  /* 最深 - 基礎背景 */
  --bg-level-2: oklch(27% 0.002 250);  /* 第二層 - 稍淺背景 */
  --bg-level-3: oklch(32% 0.002 250);  /* 第三層 - 卡片容器 */
  --bg-level-4: oklch(37% 0.002 250);  /* 最淺 - 互動元素 */

  /* 背景色（向後兼容，映射到四層結構） */
  --color-bg-primary: var(--bg-level-1);
  --color-bg-secondary: var(--bg-level-2);
  --color-bg-tertiary: oklch(26% 0.002 250);
  --color-bg-elevated: var(--bg-level-2);
  --color-bg-card: var(--bg-level-3);
  --color-bg-card-hover: var(--bg-level-4);

  /* 文字色 - OKLCH 格式 */
  --color-text-primary: oklch(96% 0.002 250);
  --color-text-secondary: oklch(65% 0.002 250);
  --color-text-tertiary: oklch(55% 0.002 250);
  --color-text-muted: oklch(40% 0.002 250);

  /* 邊框色 - OKLCH 格式 */
  --color-border-default: oklch(50% 0.002 250 / 0.1);
  --color-border-muted: oklch(50% 0.002 250 / 0.05);
  --color-border-emphasis: oklch(50% 0.002 250 / 0.2);

  /* 表面邊框（卡片/容器的上亮下暗邊線，用於取代硬編碼 OKLCH） */
  --surface-border-top: oklch(42% 0.002 250);
  --surface-border-bottom: oklch(20% 0.002 250);

  /* ========================================
     2. 主題色彩 (Theme Colors) - OKLCH 格式
     ======================================== */

  /* Cyan 青色 - 系統、連結、主要強調（Hue 220） */
  --color-cyan-50: oklch(95% 0.05 220);
  --color-cyan-100: oklch(90% 0.1 220);
  --color-cyan-200: oklch(85% 0.15 220);
  --color-cyan-300: oklch(75% 0.2 220);
  --color-cyan-400: oklch(65% 0.25 220);
  --color-cyan-500: oklch(55% 0.3 220);
  --color-cyan-600: oklch(45% 0.25 220);
  --color-cyan-700: oklch(35% 0.2 220);
  --color-cyan: oklch(60% 0.35 220);
  --color-cyan-light: oklch(75% 0.2 220);
  --color-cyan-dark: oklch(50% 0.3 220);

  /* Green 綠色 - 成功、Production、CTA（Hue 145） */
  --color-green-50: oklch(95% 0.05 145);
  --color-green-100: oklch(90% 0.1 145);
  --color-green-200: oklch(85% 0.15 145);
  --color-green-300: oklch(75% 0.2 145);
  --color-green-400: oklch(65% 0.2 145);
  --color-green-500: oklch(60% 0.2 145);
  --color-green-600: oklch(50% 0.2 145);
  --color-green-700: oklch(40% 0.18 145);
  --color-green: oklch(60% 0.2 145);
  --color-green-light: oklch(65% 0.2 145);
  --color-green-dark: oklch(55% 0.2 145);

  /* Purple 紫色 - 次要、Evaluate、專家（Hue 280） */
  --color-purple-50: oklch(95% 0.05 280);
  --color-purple-100: oklch(90% 0.1 280);
  --color-purple-200: oklch(85% 0.15 280);
  --color-purple-300: oklch(75% 0.2 280);
  --color-purple-400: oklch(65% 0.25 280);
  --color-purple-500: oklch(55% 0.3 280);
  --color-purple-600: oklch(45% 0.28 280);
  --color-purple-700: oklch(40% 0.25 280);
  --color-purple: oklch(55% 0.3 280);
  --color-purple-light: oklch(65% 0.25 280);
  --color-purple-dark: oklch(50% 0.3 280);

  /* Orange 橙色 - 警告、Tip、能量（Hue 70） */
  --color-orange-50: oklch(95% 0.05 70);
  --color-orange-100: oklch(90% 0.1 70);
  --color-orange-200: oklch(85% 0.15 70);
  --color-orange-300: oklch(75% 0.2 70);
  --color-orange-400: oklch(70% 0.2 70);
  --color-orange-500: oklch(65% 0.2 70);
  --color-orange-600: oklch(55% 0.2 70);
  --color-orange-700: oklch(45% 0.2 70);
  --color-orange: oklch(65% 0.2 70);
  --color-orange-light: oklch(70% 0.2 70);
  --color-orange-dark: oklch(55% 0.2 70);

  /* Red 紅色 - 錯誤、Failure、警示（Hue 25） */
  --color-red-50: oklch(95% 0.05 25);
  --color-red-100: oklch(90% 0.1 25);
  --color-red-200: oklch(85% 0.15 25);
  --color-red-300: oklch(75% 0.2 25);
  --color-red-400: oklch(65% 0.25 25);
  --color-red-500: oklch(55% 0.25 25);
  --color-red-600: oklch(45% 0.25 25);
  --color-red-700: oklch(35% 0.2 25);
  --color-red: oklch(55% 0.25 25);
  --color-red-light: oklch(65% 0.25 25);
  --color-red-dark: oklch(45% 0.25 25);

  /* Yellow/Gold 金色 - 數據、價值（Hue 85） */
  --color-yellow-50: oklch(95% 0.05 85);
  --color-yellow-100: oklch(90% 0.1 85);
  --color-yellow-200: oklch(85% 0.15 85);
  --color-yellow-300: oklch(80% 0.2 85);
  --color-yellow-400: oklch(75% 0.2 85);
  --color-yellow-500: oklch(70% 0.2 85);
  --color-yellow-600: oklch(60% 0.2 85);
  --color-yellow-700: oklch(50% 0.18 85);
  --color-yellow: oklch(70% 0.2 85);
  --color-yellow-light: oklch(80% 0.2 85);
  --color-yellow-dark: oklch(60% 0.2 85);
  --color-gold: oklch(75% 0.25 85);

  /* Teal 青綠色 - 信任、穩定（Hue 180） */
  --color-teal-50: oklch(95% 0.05 180);
  --color-teal-100: oklch(90% 0.1 180);
  --color-teal-200: oklch(85% 0.15 180);
  --color-teal-300: oklch(75% 0.2 180);
  --color-teal-400: oklch(65% 0.2 180);
  --color-teal-500: oklch(60% 0.2 180);
  --color-teal-600: oklch(50% 0.18 180);
  --color-teal-700: oklch(40% 0.15 180);
  --color-teal: oklch(60% 0.2 180);
  --color-teal-light: oklch(65% 0.2 180);
  --color-teal-dark: oklch(50% 0.18 180);

  /* ========================================
     3. 語意色彩 (Semantic Colors) - OKLCH 格式
     ======================================== */

  /* Success - 綠色（Hue 145） */
  --color-success: oklch(60% 0.2 145);
  --color-success-light: oklch(65% 0.2 145);
  --color-success-dark: oklch(55% 0.2 145);

  /* Warning - 橙色（Hue 70） */
  --color-warning: oklch(70% 0.2 70);
  --color-warning-light: oklch(70% 0.2 70);
  --color-warning-dark: oklch(55% 0.2 70);

  /* Error - 紅色（Hue 25） */
  --color-error: oklch(55% 0.25 25);
  --color-error-light: oklch(65% 0.25 25);
  --color-error-dark: oklch(45% 0.25 25);

  /* Info - 藍色（Hue 220） */
  --color-info: oklch(60% 0.2 220);
  --color-info-light: oklch(75% 0.2 220);
  --color-info-dark: oklch(50% 0.3 220);

  /* Accent - 紫色（Hue 280） */
  --color-accent: oklch(55% 0.3 280);
  --color-accent-light: oklch(65% 0.25 280);
  --color-accent-dark: oklch(50% 0.3 280);

  /* ========================================
     4. 漸變效果 (Gradients) - 柔和變化
     ======================================== */

  /* 背景漸變 */
  --gradient-bg-card: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  --gradient-bg-elevated: linear-gradient(180deg, #21262D 0%, #161B22 100%);
  --gradient-bg-subtle: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);

  /* 單色系漸變（同色深淺） */
  --gradient-cyan: linear-gradient(135deg, #00D9FF 0%, #0EA5E9 100%);
  --gradient-cyan-soft: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
  --gradient-green: linear-gradient(135deg, #22C55E 0%, #10B981 100%);
  --gradient-green-soft: linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
  --gradient-purple: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
  --gradient-purple-soft: linear-gradient(135deg, #C084FC 0%, #A855F7 100%);
  --gradient-orange: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  --gradient-orange-soft: linear-gradient(135deg, #FB923C 0%, #FDBA74 100%);
  --gradient-red: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
  --gradient-red-soft: linear-gradient(135deg, #F87171 0%, #FCA5A5 100%);
  --gradient-yellow: linear-gradient(135deg, #EAB308 0%, #FDE047 100%);
  --gradient-teal: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);

  /* 跨色系漸變（柔和過渡） */
  --gradient-purple-cyan: linear-gradient(90deg, #A855F7 0%, #06B6D4 100%);
  --gradient-purple-blue: linear-gradient(90deg, #A855F7 0%, #3B82F6 100%);
  --gradient-green-teal: linear-gradient(90deg, #22C55E 0%, #14B8A6 100%);
  --gradient-green-cyan: linear-gradient(90deg, #22C55E 0%, #06B6D4 100%);
  --gradient-orange-yellow: linear-gradient(90deg, #F97316 0%, #EAB308 100%);
  --gradient-orange-red: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
  --gradient-cyan-green: linear-gradient(90deg, #06B6D4 0%, #22C55E 100%);

  /* 進度條漸變 */
  --gradient-progress: linear-gradient(90deg, #A855F7 0%, #3B82F6 50%, #22C55E 100%);
  --gradient-progress-warm: linear-gradient(90deg, #EAB308 0%, #F97316 50%, #EF4444 100%);
  --gradient-progress-cool: linear-gradient(90deg, #8B5CF6 0%, #06B6D4 50%, #14B8A6 100%);

  /* 邊框漸變 */
  --gradient-border-rainbow: linear-gradient(135deg, #A855F7 0%, #06B6D4 50%, #22C55E 100%);
  --gradient-border-cool: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);
  --gradient-border-warm: linear-gradient(135deg, #F97316 0%, #EF4444 100%);

  /* 循環圖漸變 */
  --gradient-cycle: conic-gradient(from 0deg, #A855F7, #3B82F6, #06B6D4, #14B8A6, #22C55E, #F97316, #A855F7);
  --gradient-cycle-soft: conic-gradient(from 0deg, #C084FC, #60A5FA, #22D3EE, #2DD4BF, #4ADE80, #FB923C, #C084FC);

  /* ========================================
     5. 陰影效果 (Shadows) - 三陰影法則（OKLCH 格式）
     ======================================== */

  /* 小陰影 - 輕微的凸起效果、按鈕懸停狀態 */
  --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);

  /* 中等陰影 - 卡片容器、下拉選單、模態框 */
  --shadow-md: 
    0 4px 6px -1px oklch(0% 0 0 / 0.1),
    0 2px 4px -2px oklch(0% 0 0 / 0.1);

  /* 大陰影 - 浮動操作按鈕、重要的模態框、頂層元素 */
  --shadow-lg: 
    0 10px 15px -3px oklch(0% 0 0 / 0.1),
    0 4px 6px -4px oklch(0% 0 0 / 0.1);

  /* 超大陰影 */
  --shadow-xl: 
    0 20px 25px -5px oklch(0% 0 0 / 0.1),
    0 10px 10px -5px oklch(0% 0 0 / 0.04);

  /* 發光效果 - OKLCH 格式 */
  --glow-cyan: 0 0 20px oklch(60% 0.35 220 / 0.3);
  --glow-cyan-strong: 0 0 30px oklch(60% 0.35 220 / 0.5);
  --glow-green: 0 0 20px oklch(60% 0.2 145 / 0.3);
  --glow-green-strong: 0 0 30px oklch(60% 0.2 145 / 0.5);
  --glow-purple: 0 0 20px oklch(55% 0.3 280 / 0.3);
  --glow-purple-strong: 0 0 30px oklch(55% 0.3 280 / 0.5);
  --glow-orange: 0 0 20px oklch(65% 0.2 70 / 0.3);
  --glow-orange-strong: 0 0 30px oklch(65% 0.2 70 / 0.5);
  --glow-red: 0 0 20px oklch(55% 0.25 25 / 0.3);
  --glow-red-strong: 0 0 30px oklch(55% 0.25 25 / 0.5);
  --glow-yellow: 0 0 20px oklch(70% 0.2 85 / 0.3);
  --glow-yellow-strong: 0 0 30px oklch(70% 0.2 85 / 0.5);

  /* ========================================
     6. 間距系統 (Spacing)
     ======================================== */

  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* 流體間距變數 (自動縮放) */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);

  /* ========================================
     7. 圓角系統 (Border Radius)
     ======================================== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* 元件專用 */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-tag: 6px;
  --radius-pill: 9999px;
  --radius-icon-container: 12px;

  /* ========================================
     8. 字型系統 (Typography)
     ======================================== */

  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, monospace;

  /* 字體大小 - 流體字型 (使用 clamp) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --font-size-4xl: clamp(2.25rem, 1.5rem + 3.75vw, 3rem);
  --font-size-5xl: clamp(2.5rem, 1.5rem + 5vw, 4rem);
  --font-size-6xl: clamp(3rem, 2rem + 5vw, 5rem);

  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     9. 過渡動畫 (Transitions)
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* 彈性動畫 */
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     10. Z-Index 層級
     ======================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     11. 邊框寬度 (Border Width)
     ======================================== */

  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
}

/* ========================================
   深色主題基礎樣式
   ======================================== */

.dark-theme,
[data-theme="dark"] {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
}