refactor(styles): migrate from CSS variables to Tailwind classes

- Replace all CSS custom properties with Tailwind utility classes
- Add tailwind.config.js with custom color palette matching Linear design
- Reduce index.css from 89 to 37 lines (58% reduction)
- Maintain consistent visual appearance with semantic color usage
- Update all components to use Tailwind classes instead of CSS variables

src/components/ProviderForm/ApiKeyInput.tsx

@@ -28,15 +28,15 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
 
   const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
     disabled
-      ? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
-      : "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
+      ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
+      : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
   }`;
 
   return (
     <div className="space-y-2">
       <label
         htmlFor={id}
-        className="block text-sm font-medium text-[var(--color-text-primary)]"
+        className="block text-sm font-medium text-gray-900"
       >
         {label} {required && "*"}
       </label>
@@ -56,7 +56,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
           <button
             type="button"
             onClick={toggleShowKey}
-            className="absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-900 transition-colors"
             aria-label={showKey ? "隐藏API Key" : "显示API Key"}
           >
             {showKey ? <EyeOff size={16} /> : <Eye size={16} />}

src/components/ProviderForm/ClaudeConfigEditor.tsx

@@ -19,16 +19,16 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
       <div className="flex items-center justify-between">
         <label
           htmlFor="settingsConfig"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           Claude Code 配置 (JSON) *
         </label>
-        <label className="inline-flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+        <label className="inline-flex items-center gap-2 text-sm text-gray-500 cursor-pointer">
           <input
             type="checkbox"
             checked={disableCoAuthored}
             onChange={(e) => onCoAuthoredToggle(e.target.checked)}
-            className="w-4 h-4 text-[var(--color-primary)] bg-white border-[var(--color-border)] rounded focus:ring-[var(--color-primary)] focus:ring-2"
+            className="w-4 h-4 text-blue-500 bg-white border-gray-200 rounded focus:ring-blue-500 focus:ring-2"
           />
           禁止 Claude Code 签名
         </label>
@@ -44,7 +44,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
 }`}
         rows={12}
       />
-      <p className="text-xs text-[var(--color-text-secondary)]">
+      <p className="text-xs text-gray-500">
         完整的 Claude Code settings.json 配置内容
       </p>
     </div>

src/components/ProviderForm/CodexConfigEditor.tsx

@@ -20,7 +20,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       <div className="space-y-2">
         <label
           htmlFor="codexAuth"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           auth.json (JSON) *
         </label>
@@ -34,9 +34,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
 }`}
           rows={6}
           required
-          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[8rem]"
+          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[8rem]"
         />
-        <p className="text-xs text-[var(--color-text-secondary)]">
+        <p className="text-xs text-gray-500">
           Codex auth.json 配置内容
         </p>
       </div>
@@ -44,7 +44,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       <div className="space-y-2">
         <label
           htmlFor="codexConfig"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           config.toml (TOML)
         </label>
@@ -54,9 +54,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
           onChange={(e) => onConfigChange(e.target.value)}
           placeholder=""
           rows={8}
-          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[10rem]"
+          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[10rem]"
         />
-        <p className="text-xs text-[var(--color-text-secondary)]">
+        <p className="text-xs text-gray-500">
           Codex config.toml 配置内容
         </p>
       </div>

src/components/ProviderForm/KimiModelSelector.tsx

@@ -88,8 +88,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
 
   const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white ${
     disabled
-      ? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
-      : "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
+      ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
+      : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
   }`;
 
   const ModelSelect: React.FC<{
@@ -98,7 +98,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
     onChange: (value: string) => void;
   }> = ({ label, value, onChange }) => (
     <div className="space-y-2">
-      <label className="block text-sm font-medium text-[var(--color-text-primary)]">
+      <label className="block text-sm font-medium text-gray-900">
         {label}
       </label>
       <div className="relative">
@@ -123,7 +123,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
         </select>
         <ChevronDown
           size={16}
-          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-secondary)] pointer-events-none"
+          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"
         />
       </div>
     </div>
@@ -132,14 +132,14 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-[var(--color-text-primary)]">
+        <h3 className="text-sm font-medium text-gray-900">
           模型配置
         </h3>
         <button
           type="button"
           onClick={() => debouncedKey && fetchModelsWithKey(debouncedKey)}
           disabled={disabled || loading || !debouncedKey}
-          className="inline-flex items-center gap-1 px-2 py-1 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          className="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
         >
           <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
           刷新模型列表
@@ -147,12 +147,12 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
       </div>
 
       {error && (
-        <div className="flex items-center gap-2 p-3 bg-[var(--color-error-light)] border border-[var(--color-error)]/20 rounded-lg">
+        <div className="flex items-center gap-2 p-3 bg-red-100 border border-red-500/20 rounded-lg">
           <AlertCircle
             size={16}
-            className="text-[var(--color-error)] flex-shrink-0"
+            className="text-red-500 flex-shrink-0"
           />
-          <p className="text-[var(--color-error)] text-xs">{error}</p>
+          <p className="text-red-500 text-xs">{error}</p>
         </div>
       )}
 
@@ -172,8 +172,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
       </div>
 
       {!apiKey.trim() && (
-        <div className="p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg">
-          <p className="text-xs text-[var(--color-text-secondary)]">
+        <div className="p-3 bg-gray-100 border border-gray-200 rounded-lg">
+          <p className="text-xs text-gray-500">
             📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表
           </p>
         </div>

src/components/ProviderForm/PresetSelector.tsx

@@ -30,11 +30,11 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
 
     if (isSelected) {
       return isOfficial
-        ? `${baseClass} bg-[var(--color-warning)] text-white`
-        : `${baseClass} bg-[var(--color-primary)] text-white`;
+        ? `${baseClass} bg-amber-500 text-white`
+        : `${baseClass} bg-blue-500 text-white`;
     }
 
-    return `${baseClass} bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-border)]`;
+    return `${baseClass} bg-gray-100 text-gray-500 hover:bg-gray-200`;
   };
 
   const getDescription = () => {
@@ -55,13 +55,13 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
   return (
     <div className="space-y-4">
       <div>
-        <label className="block text-sm font-medium text-[var(--color-text-primary)] mb-3">
+        <label className="block text-sm font-medium text-gray-900 mb-3">
           {title}
         </label>
         <div className="flex flex-wrap gap-2">
           <button
             type="button"
-            className={getButtonClass(-1)}
+            className={`${getButtonClass(-1)} ${selectedIndex === -1 ? '' : ''}`}
             onClick={onCustomClick}
           >
             {customLabel}
@@ -80,7 +80,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
         </div>
       </div>
       {getDescription() && (
-        <p className="text-sm text-[var(--color-text-secondary)]">
+        <p className="text-sm text-gray-500">
           {getDescription()}
         </p>
       )}