/*
 * ChatGPTPro俱乐部 · New API 站点配色（贴近主站 dashboard.gptclub.ai 的「宣纸、玉、墨、金」）
 *
 * 不改 New API 的代码：nginx 用 sub_filter 把这个文件插到页面 </head> 前面（见 nginx-snippet.conf），
 * 排在 New API 自己的样式后面，同名变量以这里为准。只覆盖默认配色：用户在设置里自己选了别的配色预设，
 * New API 会在 <body> 上写 data-theme-preset，那些预设的变量定义在 body 上，照旧生效。
 * 升级 New API 后要核对：web/src/styles/theme.css 里 :root 和 .dark 的变量名有没有改。
 */

:root {
  --gc-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-ui-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --background: #f5ecd7;
  --foreground: #3b3124;
  --card: #fbf6ea;
  --card-foreground: #3b3124;
  --popover: #fdf9f0;
  --popover-foreground: #3b3124;
  --primary: #1f6b45;
  --primary-foreground: #fffaf0;
  --secondary: #ece1c6;
  --secondary-foreground: #3b3124;
  --muted: #efe5cc;
  --muted-foreground: #6f624e;
  --accent: color-mix(in oklch, var(--primary) 10%, var(--background));
  --accent-foreground: #2c241a;
  --destructive: #b4452f;
  --destructive-foreground: #fffaf0;
  --success: #2f875a;
  --success-foreground: #fffaf0;
  --warning: #b8862b;
  --warning-foreground: #2c241a;
  --info: #3f6f8f;
  --info-foreground: #fffaf0;
  --neutral: #a3967c;
  --neutral-foreground: #2c241a;
  --border: rgba(59, 49, 36, 0.14);
  --input: rgba(59, 49, 36, 0.2);
  --ring: #2f875a;
  --chart-1: #1f6b45;
  --chart-2: #b08a3e;
  --chart-3: #3d7f86;
  --chart-4: #b8613b;
  --chart-5: #7a8b3a;
  --overview-accent-1: #1f6b45;
  --overview-accent-2: #b08a3e;
  --overview-accent-3: #3d7f86;
  --sidebar: #efe4ca;
  --sidebar-foreground: #3b3124;
  --sidebar-primary: #1f6b45;
  --sidebar-primary-foreground: #fffaf0;
  --sidebar-accent: color-mix(in oklch, var(--primary) 12%, var(--background));
  --sidebar-accent-foreground: #1f6b45;
  --sidebar-border: rgba(59, 49, 36, 0.12);
  --sidebar-ring: #2f875a;
  --skeleton-base: #ece2ca;
  --skeleton-highlight: #f6efdf;
}

/* 深色：墨底，玉绿、金色提亮一档，保证对比度 */
.dark {
  --background: #1a1712;
  --foreground: #efe6d2;
  --card: #231f18;
  --card-foreground: #efe6d2;
  --popover: #29241c;
  --popover-foreground: #efe6d2;
  --primary: #3a8f63;
  --primary-foreground: #fbf7ee;
  --secondary: #2c271f;
  --secondary-foreground: #e8dcc2;
  --muted: #2a251d;
  --muted-foreground: #b3a68b;
  --accent: color-mix(in oklch, var(--primary) 18%, var(--background));
  --accent-foreground: #f3ead6;
  --destructive: #e0735c;
  --destructive-foreground: #1a1712;
  --success: #4fb07f;
  --success-foreground: #10140f;
  --warning: #d6a64e;
  --warning-foreground: #1a1712;
  --info: #6fa3c4;
  --info-foreground: #10140f;
  --neutral: #8c8169;
  --neutral-foreground: #10140f;
  --border: rgba(239, 230, 210, 0.1);
  --input: rgba(239, 230, 210, 0.16);
  --ring: #4fb07f;
  --chart-1: #4fb07f;
  --chart-2: #d0aa5c;
  --chart-3: #5aa3aa;
  --chart-4: #d58660;
  --chart-5: #a3b45a;
  --overview-accent-1: #4fb07f;
  --overview-accent-2: #d0aa5c;
  --overview-accent-3: #5aa3aa;
  --sidebar: #16130f;
  --sidebar-foreground: #ece2cd;
  --sidebar-primary: #3a8f63;
  --sidebar-primary-foreground: #fbf7ee;
  --sidebar-accent: color-mix(in oklch, var(--primary) 18%, var(--background));
  --sidebar-accent-foreground: #cfe8d9;
  --sidebar-border: rgba(239, 230, 210, 0.09);
  --sidebar-ring: #4fb07f;
  --skeleton-base: #2a251d;
  --skeleton-highlight: #353026;
}

/*
 * 控制台的内容区（侧栏右边那块，data-slot=sidebar-inset）单独调亮，和顶栏、侧栏的纸色拉开，表格看得清。
 * 表头、悬停这些颜色是按背景色算出来的，变量在 :root 上就算好了，所以要在这里按新背景重新算一遍。
 */
body:not([data-theme-preset]) [data-slot='sidebar-inset'] {
  --background: #fdfaf3;
  --card: #fffdf8;
  --popover: #fffdf8;
  --secondary: #f3ecdc;
  --muted: #f5efe2;
  --border: rgba(59, 49, 36, 0.12);
  --input: rgba(59, 49, 36, 0.18);
  --accent: color-mix(in oklch, var(--primary) 9%, var(--background));
  --table-row: var(--background);
  --table-header: color-mix(in oklch, var(--foreground) 2.5%, var(--background));
  --table-header-hover: color-mix(in oklch, var(--foreground) 4%, var(--background));
  --table-disabled: color-mix(in oklch, var(--foreground) 3%, var(--background));
  --table-disabled-hover: color-mix(in oklch, var(--foreground) 4.5%, var(--background));
  --table-disabled-border: color-mix(in oklch, var(--foreground) 16%, var(--background));
  --skeleton-base: #f3ecdc;
  --skeleton-highlight: #fbf7ee;
}
.dark body:not([data-theme-preset]) [data-slot='sidebar-inset'] {
  --background: #221e18;
  --card: #29241d;
  --popover: #2d2820;
  --secondary: #2f2a22;
  --muted: #2c271f;
  --border: rgba(239, 230, 210, 0.1);
  --input: rgba(239, 230, 210, 0.16);
  --accent: color-mix(in oklch, var(--primary) 16%, var(--background));
  --table-row: var(--background);
  --table-header: color-mix(in oklch, var(--foreground) 5%, var(--background));
  --table-header-hover: color-mix(in oklch, var(--foreground) 8%, var(--background));
  --table-disabled: color-mix(in oklch, var(--foreground) 7%, var(--background));
  --table-disabled-hover: color-mix(in oklch, var(--foreground) 9.5%, var(--background));
  --table-disabled-border: color-mix(in oklch, var(--foreground) 24%, var(--background));
  --skeleton-base: #2f2a22;
  --skeleton-highlight: #3a342a;
}

/* 标题和顶栏的站名用宋体，和主站一样；只在默认配色下 */
body:not([data-theme-preset]) h1,
body:not([data-theme-preset]) h2,
body:not([data-theme-preset]) header a[href="/"] > span {
  font-family: var(--gc-serif);
}
body:not([data-theme-preset]) header a[href="/"] > span {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 顶栏的 Discord 按钮（gptclub-brand.js 插进去的）：主站右上角那种玉绿胶囊 */
.gptclub-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.125rem;
  margin: 0 0.25rem 0 0.5rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 107, 69, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%),
    rgba(31, 107, 69, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 16px rgba(31, 107, 69, 0.08);
  color: #1f6b45;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gptclub-discord:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 22px rgba(31, 107, 69, 0.14);
}
.gptclub-discord svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.gptclub-discord--icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.dark .gptclub-discord {
  border-color: rgba(79, 176, 127, 0.3);
  background: rgba(79, 176, 127, 0.12);
  box-shadow: none;
  color: #8fd3ad;
}