/* ==========================================================================
   tokens.css — shadcn/ui 官方主题令牌（权威来源）
   ==========================================================================

   依据（2026-09-21 逐条核对官方源码，非二手转述）：

     1. 设计哲学   apps/v4/content/docs/(root)/index.mdx
        「This is not a component library. It is how you build your component library.」
        Open Code / Composition / Distribution / Beautiful Defaults / AI-Ready

     2. 主题与令牌 apps/v4/content/docs/(root)/theming.mdx
        ——本文件即按其中「Default Theme CSS」的 `neutral` 脚手架 1:1 落地

     3. 组件真实现 apps/v4/registry/new-york-v4/ui/{card,button,table}.tsx
        ——样式数值以源码为准，不以任何二手总结为准

   ─────────────────────────────────────────────────────────────────────────
   两条硬规则（后续所有改动都必须遵守）
   ─────────────────────────────────────────────────────────────────────────

   A. **颜色只能来自本文件的语义 token。** 任何页面/组件里出现字面量色值
      （#xxxxxx / rgb() / oklch()）都算违规。shadcn 的用法是
      `bg-background text-foreground` 这类语义类名，等价于本文件的 `var(--…)`。

   B. **圆角只能来自 `--radius` 派生的那一套。** 官方只定义**一个**基准 `--radius`，
      其余 7 级都由它 calc 出来（见下方 Radius Scale）。**不允许再出现
      "控件 16px / 容器 20px / 浮动面板 24px" 这种各自独立的硬编码圆角**：
      那样改主题时根本没法一起变，正是官方方案要解决的问题。
      要调圆角观感 → 只改 `--radius` 一个值。

   ─────────────────────────────────────────────────────────────────────────
   与旧版本的差异（本次按官方修正）
   ─────────────────────────────────────────────────────────────────────────

   | 项           | 旧值（错误语义）        | 官方（本文件）                    |
   |--------------|-------------------------|-----------------------------------|
   | --radius     | 16px「控件」            | 0.625rem **基准**，lg = 基准       |
   | --radius-lg  | 20px「容器」            | = --radius（基准本身）            |
   | --radius-xl  | 24px「浮动面板」        | 1.4 × 基准                        |
   | --radius-sm  | 12px「菜单项」          | 0.6 × 基准                        |
   | 缺             | —                       | md / 2xl / 3xl / 4xl 四级          |
   | --shadow-*   | 自定义数值              | Tailwind v4 的 xs/sm（官方组件引用）|

   注意 `--radius-xl` 旧值 24px 与新值 1.4×基准 是**同名不同义**，
   这是之前最容易出错的地方：照抄旧文件会把卡片圆角搞错。
   ========================================================================== */

:root {
  /* ── 圆角基准（唯一的圆角旋钮）────────────────────────────── */
  --radius: 0.625rem;                          /* 官方默认 10px */

  /* 由基准派生的七级（官方 @theme inline 原式）*/
  --radius-sm: calc(var(--radius) * 0.6);      /* 6px  */
  --radius-md: calc(var(--radius) * 0.8);      /* 8px  —— 按钮/输入框 */
  --radius-lg: var(--radius);                  /* 10px */
  --radius-xl: calc(var(--radius) * 1.4);      /* 14px —— 卡片/表格容器 */
  --radius-2xl: calc(var(--radius) * 1.8);     /* 18px */
  --radius-3xl: calc(var(--radius) * 2.2);     /* 22px */
  --radius-4xl: calc(var(--radius) * 2.6);     /* 26px —— 对话框/浮动面板 */

  /* ── 语义色（= 官方 oklch neutral 的精确 hex 换算）────────────
     用 hex 而非官方 oklch 原文，是为了让老浏览器也渲染正常；
     色值完全等价，不是"换了一套配色"。                              */
  --background: #ffffff;
  --foreground: #0a0a0a;

  --card: #ffffff;
  --card-foreground: #0a0a0a;

  --popover: #ffffff;
  --popover-foreground: #0a0a0a;

  --primary: #171717;
  --primary-foreground: #fafafa;

  --secondary: #f5f5f5;
  --secondary-foreground: #171717;

  --muted: #f5f5f5;
  --muted-foreground: #737373;

  --accent: #f5f5f5;
  --accent-foreground: #171717;

  --destructive: #e7000b;

  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;

  /* ── 侧边栏（官方八件套，缺一个都会在写 Sidebar 时不齐）──────── */
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;

  /* ── 图表（官方中性主题的图表色**是有彩色的**，不是灰阶）──────────
     下面这组 hex 不是手抄的：是把官方 oklch 原文交给浏览器
     canvas 取像素换算出来的 sRGB（`getComputedStyle().color` 只会原样回显
     oklch，不能当换算结果用）。换算可信度已用 destructive 交叉验证 ——
     官方 oklch(0.577 0.245 27.325) 换算得 #e7000b，与既有值完全一致。 */
  --chart-1: #f54a00;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;

  /* ── 阴影（Tailwind v4 默认值；官方组件直接引用 shadow-xs / shadow-sm）── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  /* ── 过渡（官方组件用 `transition-all` / `transition-colors`，即 150ms）──
     这一组是**本项目补充**的，官方脚手架里没有；保留是为了给弹出层/导航留分层。 */
  --dur-fast: 150ms;     /* 官方 transition-all / transition-colors */
  --dur-pop: 100ms;
  --dur-input: 200ms;
  --dur-nav: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;

  --card: #171717;
  --card-foreground: #fafafa;

  --popover: #171717;
  --popover-foreground: #fafafa;

  /* 主色明暗反转 —— Neutral 主题的签名特征，不要弄反 */
  --primary: #e5e5e5;
  --primary-foreground: #171717;

  --secondary: #262626;
  --secondary-foreground: #fafafa;

  --muted: #262626;
  --muted-foreground: #a1a1a1;

  --accent: #262626;
  --accent-foreground: #fafafa;

  --destructive: #ff6467;

  /* 深色边框必须是半透明白，叠在背景上才有自然层次 */
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #737373;

  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #e5e5e5;
  --sidebar-primary-foreground: #171717;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #737373;

  --chart-1: #1447e6;
  --chart-2: #00bc7d;
  --chart-3: #fe9a00;
  --chart-4: #ad46ff;
  --chart-5: #ff2056;
}

/* ==========================================================================
   基础层（对应官方 `@layer base`）
     * { @apply border-border outline-ring/50; }
     body { @apply bg-background text-foreground; }
   官方把「默认描边色」和「默认焦点轮廓色」直接铺到所有元素上，
   这样组件不写 border-color 也能拿到正确的描边色。
   ========================================================================== */
* {
  border-color: var(--border);
  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

body {
  background: var(--background);
  color: var(--foreground);
}