/**
 * Design System - Semantic Tokens
 *
 * 语义化颜色 tokens，定义 Light 和 Dark 模式下的颜色用途
 * 组件应该使用这些语义化的名称，而不是直接使用原始色板
 */

import { primitives } from './primitives';

/**
 * Light Mode Semantic Tokens
 */
export const lightTokens = {
  text: {
    primary: primitives.brand[11],      // #111827 - 主要文本
    secondary: primitives.brand[8],     // #4b5563 - 次要文本
    tertiary: primitives.brand[6],      // #9ca1af - 辅助文本
    inverse: primitives.base[1],        // #ffffff - 反色文本（深色背景上）
    disabled: primitives.brand[5],      // #d1d5db - 禁用文本
  },

  bg: {
    base: primitives.base[1],           // #ffffff - 主背景
    subtle: primitives.brand[2],        // #f9fafb - 次级背景
    surface: primitives.base[1],        // #ffffff - 卡片/表面背景
    elevated: primitives.brand[3],      // #f3f4f6 - 提升背景
    overlay: 'rgba(0, 0, 0, 0.5)',      // 遮罩层
  },

  border: {
    normal: primitives.brand[4],        // #e5e7eb - 标准边框
    subtle: primitives.brand[3],        // #f3f4f6 - 微妙边框
    strong: primitives.brand[5],        // #d1d5db - 强调边框
  },

  accent: {
    green: primitives.green[9],         // #10b981 - 绿色强调
    greenBg: primitives.green[1],       // #e1f8ec - 绿色背景
    blue: primitives.blue[9],           // #1447e6 - 蓝色强调
    blueBg: primitives.blue[1],         // #ebf2ff - 蓝色背景
    red: primitives.red[9],             // #ef4444 - 红色强调
    yellow: primitives.yellow[9],       // #f59e0b - 黄色强调
  },

  special: {
    black: primitives.base[12],         // #000000 - 纯黑（特殊用途）
    white: primitives.base[1],          // #ffffff - 纯白（特殊用途）
  },
} as const;

/**
 * Dark Mode Semantic Tokens
 */
export const darkTokens = {
  text: {
    primary: primitives.dark.zinc[50],      // #fafafa - 主要文本
    secondary: primitives.dark.zinc[400],   // #a1a1aa - 次要文本
    tertiary: primitives.dark.zinc[500],    // #71717a - 辅助文本
    inverse: primitives.brand[11],          // #111827 - 反色文本（浅色背景上）
    disabled: primitives.dark.zinc[500],    // #71717a - 禁用文本
  },

  bg: {
    base: primitives.dark.zinc[950],        // #0a0a0a - 主背景
    subtle: primitives.dark.zinc[950],      // #0a0a0a - 次级背景
    surface: primitives.dark.zinc[900],     // #18181b - 卡片/表面背景
    elevated: primitives.dark.zinc[800],    // #27272a - 提升背景
    overlay: 'rgba(0, 0, 0, 0.7)',          // 遮罩层
  },

  border: {
    normal: primitives.dark.zinc[800],      // #27272a - 标准边框
    subtle: primitives.dark.zinc[900],      // #18181b - 微妙边框
    strong: '#3f3f46',                      // 强调边框
  },

  accent: {
    green: primitives.green[9],             // #10b981 - 绿色强调（保持一致）
    greenBg: 'rgba(16, 185, 129, 0.15)',    // 绿色背景（透明）
    blue: primitives.blue[9],               // #1447e6 - 蓝色强调（保持一致）
    blueBg: 'rgba(20, 71, 230, 0.15)',      // 蓝色背景（透明）
    red: primitives.red[9],                 // #ef4444 - 红色强调
    yellow: primitives.yellow[9],           // #f59e0b - 黄色强调
  },

  special: {
    black: primitives.base[12],             // #000000 - 纯黑（特殊用途）
    white: primitives.base[1],              // #ffffff - 纯白（特殊用途）
  },
} as const;

/**
 * 导出统一的 semantic tokens 结构
 */
export const semanticTokens = {
  light: lightTokens,
  dark: darkTokens,
} as const;

export type SemanticTokens = typeof semanticTokens;
export type LightTokens = typeof lightTokens;
export type DarkTokens = typeof darkTokens;