/* ============================================
   Prompt 提示词编辑器 - Design Tokens
   Apple-style Design System
   ============================================ */

:root {
  /* ========== 颜色系统 ========== */
  
  /* 基础色 */
  --color-white: #FFFFFF;
  --color-black: #000000;
  
  /* 中性色 - 亮色主题 */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F7;
  --neutral-200: #E8E8ED;
  --neutral-300: #D2D2D7;
  --neutral-400: #86868B;
  --neutral-500: #6E6E73;
  --neutral-600: #424245;
  --neutral-700: #333336;
  --neutral-800: #1D1D1F;
  --neutral-900: #0A0A0A;
  
  /* 主色调 - 蓝紫 */
  --primary-50:  #F0F4FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;
  
  /* 语义色 */
  --success-light: #ECFDF5;
  --success-main:  #10B981;
  --success-dark:  #059669;
  
  --warning-light: #FFFBEB;
  --warning-main:  #F59E0B;
  --warning-dark:  #D97706;
  
  --error-light:   #FEF2F2;
  --error-main:    #EF4444;
  --error-dark:    #DC2626;
  
  /* 语义映射 */
  --bg-primary:    var(--neutral-50);
  --bg-secondary:  var(--neutral-100);
  --bg-tertiary:   var(--neutral-200);
  --bg-overlay:    rgba(0, 0, 0, 0.5);
  
  --text-primary:   var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   var(--color-white);
  
  --border-light:  var(--neutral-200);
  --border-main:   var(--neutral-300);
  --border-focus:  var(--primary-500);
  
  /* ========== 字体系统 ========== */
  
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 
                  'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Monaco', 'Inconsolata',
               'Roboto Mono', 'Source Code Pro', monospace;
  
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;
  
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;
  
  /* ========== 间距系统 ========== */
  
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  
  /* ========== 阴影系统 ========== */
  
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* ========== 圆角系统 ========== */
  
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  /* ========== 动效系统 ========== */
  
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  /* ========== 栅格系统 ========== */
  
  --grid-columns: 12;
  --grid-gutter:  24px;
  --grid-margin:  40px;
  
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
}

/* ========== 暗色主题 ========== */

[data-theme="dark"] {
  --neutral-50:  #0A0A0A;
  --neutral-100: #1D1D1F;
  --neutral-200: #333336;
  --neutral-300: #424245;
  --neutral-400: #6E6E73;
  --neutral-500: #86868B;
  --neutral-600: #D2D2D7;
  --neutral-700: #E8E8ED;
  --neutral-800: #F5F5F7;
  --neutral-900: #FAFAFA;
  
  --primary-400: #A5B4FC;
  --primary-500: #818CF8;
  --primary-600: #6366F1;
  
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.6);
}