/*
 * 数字人 v5.0.8 设计 Token
 *
 * 与用户端 src/frontend/styles/tokens.css 保持一致：
 * - HSL 三元组 (h s% l%) 通过 hsl(var(--xxx)) 引用
 * - shadcn/ui 风格命名: --background/foreground/brand/muted 等
 * - 暗色模式 [data-theme="dark"] 全套覆盖
 *
 * 接入: <link> 引入 tokens.css 后, 业务 CSS 全部走 hsl(var(--xxx))。
 */

:root {
  /* —— 中性色 (stone 系) —— */
  --background: 0 0% 100%;
  --foreground: 24 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 24 10% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 24 10% 10%;
  --muted: 30 6% 96%;
  --muted-foreground: 25 6% 45%;
  --border: 20 6% 90%;
  --input: 20 6% 90%;
  --ring: 24 95% 53%;

  /* —— 品牌主色（声客暖橙） —— */
  --brand: 24 95% 53%;
  --brand-foreground: 0 0% 100%;
  --brand-50: 33 100% 96%;
  --brand-100: 33 100% 91%;
  --brand-200: 33 100% 83%;
  --brand-300: 30 100% 73%;
  --brand-400: 27 96% 61%;
  --brand-500: 24 95% 53%;
  --brand-600: 21 90% 48%;
  --brand-700: 17 88% 40%;

  /* —— 中性色简写（兼容现有类名） —— */
  --neutral-50: 0 0% 98%;
  --neutral-100: 30 6% 96%;
  --neutral-200: 20 6% 90%;
  --neutral-300: 20 5% 84%;
  --neutral-400: 25 5% 65%;
  --neutral-500: 25 6% 45%;
  --neutral-600: 25 6% 35%;
  --neutral-700: 24 7% 25%;
  --neutral-800: 24 10% 15%;
  --neutral-900: 24 10% 10%;

  /* —— 语义色 (HSL) —— */
  --success: 158 64% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 24 10% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --info: 199 89% 48%;
  --info-foreground: 0 0% 100%;

  /* —— 旧命名兼容 (alpha) ——
     仍保留 --color-* 系列，让现有 CSS 文件能渐进迁移。
     每个变量都映射到对应 HSL 变量，新代码统一用 hsl(var(--brand-500)) 等。 */
  --color-bg: hsl(var(--background));
  --color-bg-card: hsl(var(--card));
  --color-bg-soft: hsl(var(--brand-50));
  --color-text: hsl(var(--foreground));
  --color-text-secondary: hsl(var(--muted-foreground));
  --color-text-primary: hsl(var(--foreground));
  --color-text-muted: hsl(var(--muted-foreground));
  --color-border: hsl(var(--border));
  --color-success: hsl(var(--success));
  --color-warning: hsl(var(--warning));
  --color-danger: hsl(var(--destructive));
  --color-info: hsl(var(--info));

  --color-brand-50: hsl(var(--brand-50));
  --color-brand-100: hsl(var(--brand-100));
  --color-brand-200: hsl(var(--brand-200));
  --color-brand-300: hsl(var(--brand-300));
  --color-brand-400: hsl(var(--brand-400));
  --color-brand-500: hsl(var(--brand-500));
  --color-brand-600: hsl(var(--brand-600));
  --color-brand-700: hsl(var(--brand-700));

  --color-neutral-50: hsl(var(--neutral-50));
  --color-neutral-100: hsl(var(--neutral-100));
  --color-neutral-200: hsl(var(--neutral-200));
  --color-neutral-300: hsl(var(--neutral-300));
  --color-neutral-400: hsl(var(--neutral-400));
  --color-neutral-500: hsl(var(--neutral-500));
  --color-neutral-600: hsl(var(--neutral-600));
  --color-neutral-700: hsl(var(--neutral-700));
  --color-neutral-800: hsl(var(--neutral-800));
  --color-neutral-900: hsl(var(--neutral-900));

  /* —— 圆角 (对齐 shadcn) —— */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-pill: 999px;

  /* —— 阴影 (HSL 化) —— */
  --shadow-2xs: 0 1px 2px 0 hsl(24 10% 10% / 0.04);
  --shadow-xs: 0 1px 2px 0 hsl(24 10% 10% / 0.04);
  --shadow-sm: 0 1px 3px 0 hsl(24 10% 10% / 0.06), 0 1px 2px -1px hsl(24 10% 10% / 0.04);
  --shadow-md: 0 4px 6px -1px hsl(24 10% 10% / 0.06), 0 2px 4px -2px hsl(24 10% 10% / 0.04);
  --shadow-lg: 0 12px 24px -4px hsl(24 10% 10% / 0.10), 0 8px 12px -6px hsl(24 10% 10% / 0.06);
  --shadow-glow: 0 8px 24px -4px hsl(24 95% 53% / 0.25);

  /* —— 间距 (8px grid) —— */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", Roboto, "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* —— Button 高度 (与用户端 components.css 对齐) —— */
  --btn-h-sm: 32px;
  --btn-h-md: 38px;
  --btn-h-lg: 44px;
  --input-h: 38px;
}

/* ============================================================
   暗色模式 (与用户端 src/frontend/styles/tokens.css 对齐)
   ============================================================ */
[data-theme="dark"] {
  --background: 24 10% 7%;
  --foreground: 30 6% 96%;
  --card: 24 10% 9%;
  --card-foreground: 30 6% 96%;
  --popover: 24 10% 9%;
  --popover-foreground: 30 6% 96%;
  --muted: 24 6% 14%;
  --muted-foreground: 25 6% 64%;
  --border: 24 6% 18%;
  --input: 24 6% 18%;
  --ring: 27 96% 61%;

  --brand: 27 96% 61%;
  --brand-50: 24 30% 14%;
  --brand-100: 24 40% 18%;
  --brand-700: 30 100% 73%;

  --neutral-50: 24 10% 9%;
  --neutral-100: 24 6% 14%;
  --neutral-200: 24 6% 18%;
  --neutral-300: 24 6% 22%;
  --neutral-400: 25 6% 50%;
  --neutral-500: 25 6% 64%;
  --neutral-600: 25 6% 75%;
  --neutral-700: 25 6% 85%;
  --neutral-800: 30 6% 92%;
  --neutral-900: 30 6% 96%;

  --success: 158 64% 50%;
  --warning: 38 92% 55%;
  --destructive: 0 72% 60%;
  --info: 199 89% 60%;

  /* 暗色阴影用黑色光晕 */
  --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
  --shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.5);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.5), 0 1px 2px -1px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.3);
  --shadow-lg: 0 12px 24px -4px hsl(0 0% 0% / 0.6), 0 8px 12px -6px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 8px 24px -4px hsl(24 95% 53% / 0.4);
}