@import "tailwindcss";

/* ─────────────────────────────────────────────────────────
 * PAC Design Tokens(design-system.md §2-§4)
 *
 * 沿用 shadcn 的 HSL var 模式(方便组件级覆盖),但:
 *   - primary 改成 teal-600(PAC 品牌)
 *   - border 加深(default shadcn 91.4% 视觉太弱)
 *   - 阴影整体放轻(Claude / OpenAI 现代风:border 主导,shadow 仅用于"浮起"场景)
 *   - 字体优先 PingFang(医疗 SaaS 中文场景)
 *
 * 加新色?加到 :root 再到 @theme inline 暴露 utility(bg-X / text-X)。
 * ───────────────────────────────────────────────────────── */

@layer base {
  :root {
    /* === 中性灰阶(shadcn slate)=== */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    /* === PAC 品牌色 === */
    --primary: 173 80% 36%;                 /* teal-600 */
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --destructive: 347 77% 50%;             /* rose-600 */
    --destructive-foreground: 0 0% 100%;

    /* === 边框 — 加深(91.4% → 87%,1px 视觉更扎实)=== */
    --border: 214 24% 87%;
    --input: 214 28% 82%;                   /* 输入框边再深一档,跟 hover 状态拉开 */
    --ring: 173 80% 36%;                    /* focus ring 与 primary 同色 */

    --radius: 0.5rem;
  }
}

@theme inline {
  /* === 颜色 token → 自动生成 bg-{name} text-{name} border-{name} === */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  /* === radius === */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* === 阴影 — 整体放轻(Claude/Anthropic/OpenAI 风:几乎只见 border)===
   * 对照 shadcn 默认 / Tailwind v4 默认:都偏 0.05-0.10 透明度;
   * 我们改 0.03-0.06,叠加更克制,只用于"浮起"场景(popover/dialog)。
   */
  --shadow-2xs: 0 1px 1px 0 rgb(15 23 42 / 0.03);
  --shadow-xs:  0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm:  0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow:     0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow-md:  0 2px 8px -2px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.04);
  --shadow-lg:  0 6px 16px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04);
  --shadow-xl:  0 12px 24px -6px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.05);

  /* === 字体 — 优先 PingFang(中文)+ 系统栈兜底 === */
  --font-sans: "PingFang SC", "Noto Sans CJK SC", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Microsoft YaHei", sans-serif;
}

/* 全局 border 颜色 — 这样写不用每处都标 border-border */
* {
  border-color: hsl(var(--border));
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}

/* ─────────────────────────────────────────────────────────
 * 自定义 utilities(Tailwind v4 @utility 推荐写法)
 *
 * 用途:跨组件复用的视觉模式,不到组件抽象的程度(轻量布局/状态)。
 * v3 用 @apply,v4 推荐 @utility(更精准,不污染 base layer,可被 variant 修饰)。
 * ───────────────────────────────────────────────────────── */

/** 次级信息行 — 淡 bg,放在 Card 内做"二级数据条"(push secret / endpoint / event row) */
@utility row-quiet {
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius-sm);
}

/** 卡片内的小型分组容器(凭据 / push secret 列表的外框) */
@utility surface-inset {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
}

/** 等宽数字 — 金额/时间/计数(design-system.md §3) */
@utility nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* fadeIn — EmrSoapView carousel 切换淡入 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* shimmerText — AI 流式生成时标题文字扫光闪动(GPT / Claude Code 风格) */
@keyframes shimmerText {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
.shimmer-text {
  background: linear-gradient(
    100deg,
    rgb(30 41 59) 35%,
    rgb(148 163 184) 50%,
    rgb(30 41 59) 65%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmerText 1.6s linear infinite;
}

/* 实时教练 — 语音波形脉冲 */
@keyframes audioWave {
  0%, 100% { height: 4px; opacity: 0.45; }
  50%      { height: 28px; opacity: 1; }
}
.animate-audioWave { animation: audioWave 0.7s ease-in-out infinite; }

/* 实时教练 — 录音中麦克风按钮呼吸光圈 */
@keyframes coachPulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,63,94,0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(244,63,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); }
}
.animate-coachPulse { animation: coachPulse 1.5s ease-out infinite; }

/* 实时教练 — 面板进场 */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slideInUp { animation: slideInUp 0.2s ease-out; }

/* 实时教练 — 字幕当前句滑入吸睛(新句从下方淡入+轻微放大) */
@keyframes lyricIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-lyricIn { animation: lyricIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
