/*
 * ClawHorse 品牌层 —— 覆盖 new-api 网页端默认主题（橙色科技风 / 极简）。
 *
 * 注入方式：公网 nginx 网关对 text/html 响应做 sub_filter，在 </head> 前插入
 *   <link rel="stylesheet" href="/brand/clawhorse.css">
 * 因为插在打包 CSS 之后，同特异性规则天然赢；不改镜像、不重打前端，
 * new-api 升级后品牌层照常生效。
 *
 * 配色与桌面端 themes.css 同源：
 *   浅色 --brand: #dd4a10（白底 4.15:1，可作文字色）
 *   深色 --brand: #ff6737 / strong #ff8a5f
 * 图表辅助色沿用桌面端的 cyan/violet 一家（橙为主、青紫点缀）。
 *
 * 注意：new-api 前端的取色全走 token（--primary / --sidebar-* / --chart-*），
 * 所以只覆盖 token，不碰具体组件类名——类名带构建哈希，碰了就是升级即碎。
 */

/* ── 浅色 ──────────────────────────────────────────────── */
body,
body[data-theme-preset] {
  --primary: #dd4a10;
  --primary-foreground: #ffffff;
  --secondary-foreground: #9a3412;
  --ring: #dd4a10;

  --sidebar-primary: #dd4a10;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent-foreground: #c2410c;
  --sidebar-ring: #dd4a10;

  --chart-1: #ea580c;
  --chart-2: #0891b2;
  --chart-3: #7c3aed;
  --chart-4: #f59e0b;
  --chart-5: #059669;
  --overview-accent-1: #ea580c;
  --overview-accent-2: #0891b2;
  --overview-accent-3: #7c3aed;

  /* 极简：默认 1rem 圆角偏「气泡感」，收到 0.625 更利落。
     用户在外观设置里显式选过圆角的话，[data-theme-radius] 特异性更高，仍以用户为准。 */
  --radius: 0.625rem;
}

/* ── 深色（默认版式，boot.js 把无偏好访客引到这里）─────────── */
.dark body,
.dark body[data-theme-preset] {
  /* 黑色科技风：底从原版炭灰（oklch 0.235）压到近黑，
     卡片/弹层只抬一点点灰阶保住层次，描边相应收淡 */
  --background: oklch(0.145 0 0);
  --card: oklch(0.185 0 0);
  --popover: oklch(0.205 0 0);
  --secondary: oklch(0.24 0 0);
  --muted: oklch(0.205 0 0);
  --sidebar: oklch(0.125 0 0);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 14%);
  --sidebar-border: oklch(1 0 0 / 9%);
  --skeleton-base: oklch(0.24 0 0);
  --skeleton-highlight: oklch(0.33 0 0);

  --primary: #ff6737;
  /* 亮橙上压白字只有 2.9:1，深字 8+:1——同桌面端的处理 */
  --primary-foreground: #201009;
  --secondary-foreground: #ffb494;
  --ring: #ff6737;

  --sidebar-primary: #ff6737;
  --sidebar-primary-foreground: #201009;
  --sidebar-accent-foreground: #ffb494;
  --sidebar-ring: #ff8a5f;

  --chart-1: #ff8a5f;
  --chart-2: #3fd5e8;
  --chart-3: #c9a4fb;
  --chart-4: #fbbf24;
  --chart-5: #34d399;
  --overview-accent-1: #ff8a5f;
  --overview-accent-2: #3fd5e8;
  --overview-accent-3: #c9a4fb;

  --radius: 0.625rem;
}

/* ── 着陆页写死的蓝/紫 Tailwind 工具类 → 橙 ─────────────────
 * 着陆页（/、CTA 区）没走 token，直接写了 blue/violet 工具类。
 * 工具类名是稳定的公开 API（无构建哈希），按 2026-08 线上 rc.26
 * 全站扫描到的清单逐个覆盖；升级后若出现新的蓝色类，重扫补充即可。 */

/* 渐变标题字（"海量 AI 模型" / CTA） */
.bg-gradient-to-r.from-blue-400.via-violet-400.to-purple-500 {
  background-image: linear-gradient(90deg, #ff8a5f, #ff6737, #dd4a10) !important;
}
.dark .bg-gradient-to-r.from-blue-400.via-violet-400.to-purple-500 {
  background-image: linear-gradient(90deg, #ffc199, #ff8a5f, #ff6737) !important;
}

/* 文字（兜底用子串匹配，覆盖 hover:/dark: 前缀变体） */
[class*='text-blue-'],
.text-sky-700 {
  color: #dd4a10 !important;
}
.dark [class*='text-blue-'],
.dark .dark\:text-sky-300 {
  color: #ff8a5f !important;
}

/* 背景（按透明度逐档映射，wash 保持 wash、实心保持实心） */
.bg-blue-500 { background-color: #dd4a10 !important; }
.bg-blue-400 { background-color: #ff8a5f !important; }
.bg-blue-500\/5,
.hover\:bg-blue-500\/5:hover { background-color: rgb(221 74 16 / 0.05) !important; }
.bg-blue-500\/10 { background-color: rgb(221 74 16 / 0.1) !important; }
.bg-blue-500\/20 { background-color: rgb(221 74 16 / 0.2) !important; }
.dark .dark\:bg-blue-400 { background-color: #ff8a5f !important; }
.dark .dark\:bg-blue-400\/5 { background-color: rgb(255 138 95 / 0.07) !important; }
.dark .dark\:bg-blue-400\/10 { background-color: rgb(255 138 95 / 0.12) !important; }

/* 首屏氛围光斑：hero.tsx 用内联 style 写死了三团蓝紫 oklch，
   只能靠 !important 压过 inline style。换成 橙 + 一点青（科技感对比色）+ 琥珀 */
div.pointer-events-none.absolute.inset-0.-z-10.opacity-25 {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, oklch(0.72 0.17 45 / 80%) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 15%, oklch(0.72 0.12 200 / 50%) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 40% 80%, oklch(0.72 0.13 65 / 40%) 0%, transparent 70%) !important;
}

/* 描边 */
.border-blue-500\/20 { border-color: rgb(221 74 16 / 0.2) !important; }
.border-blue-500\/30,
.hover\:border-blue-500\/30:hover { border-color: rgb(221 74 16 / 0.3) !important; }
.dark .dark\:border-blue-400\/20 { border-color: rgb(255 138 95 / 0.25) !important; }