/* tokens.css —— 唯一样式源头，禁止页面内硬编码色值 */

@font-face {
  font-family: 'OPPO Sans';
  src: url('/assets/fonts/OPPOSans4.0.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'OPPO Sans';
  src: url('/assets/fonts/OPPOSans4.0.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'OPPO Sans';
  src: url('/assets/fonts/OPPOSans4.0.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'OPPO Sans';
  src: url('/assets/fonts/OPPOSans4.0.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 品牌色（2026-08-19 全站替换 #00ce7c；2026-09-10 老板拍板：全站按钮/文字/激活态的绿只使用 #00CE7C） */
  --brand-green: #00ce7c;
  --neon: #00ce7c;
  --neon-dark: #00ce7c;

  /* 绿色系：700~400 为按钮/文字/激活态专用，统一指向品牌绿；300/100/50 仅作浅底与描边 */
  --green-700: #00ce7c;
  --green-600: #00ce7c;
  --green-500: #00ce7c;
  --green-400: #00ce7c;
  --green-300: #4ade80;
  --green-100: #dcfce7;
  --green-50: #f0fdf4;

  /* 中性色（值已与 Figma 设计稿对齐） */
  --bg: #f8f8f8;
  --bg-soft: #fafafa;
  --bg-card: #fff;
  --text: #1a1a1a;
  --text-secondary: #444444;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --border-strong: #d1d5db;

  /* 设计稿新增 token（探索/标签/头像） */
  --chip-bg: #f0f0f0;
  --avatar-bg: #d9d9d9;

  /* 强调色 */
  --gold: #f59e0b;
  --gold-light: #fef3c7;
  --gold-text: #92400e;
  --red: #dc2626;
  --red-hover: #b91c1c;
  --red-light: #fee2e2;
  --red-200: #fecaca;
  /* 链接蓝（TASK-113 T8 更多操作链接等文字链接场景） */
  --link-blue: #2563eb;
  --SKU: #2d8edd; /* 设计文件路径「打开」操作蓝（2026-09-10 老板指定） */

  /* 设计稿规范色（Figma 设计评选网站） */
  --star: #ffc700;
  --gray-disabled: #d4d4d4;
  --logout-red: #e33333;
  --footer-text: #d1d1d1;
  --hover-gray: #f7f7f7;
  --badge-green: #007934;

  /* toast（提示气泡）：深底白字。**不能用 --text 当底色** —— 暗色下 --text 是白色，
     会变成白底白字（2026-09-14 修：暗色模式 toast 文字看不见） */
  --toast-bg: #1a1a1a;
  --toast-fg: #ffffff;

  /* 深色背景上的前景色（图片遮罩 / 视频 / 弹层上的白字白图标） */
  --on-dark: #ffffff;
  --video-bg: #000000;

  /* 浮动批量操作条（深底白字；按钮/文字与条边界须 ≥3:1，见 UX P2-2/P2-4） */
  --floatbar-bg: #111111;
  --floatbar-btn: #6b6b6b;
  --floatbar-btn-hover: #7d7d7d;

  /* 排名徽章 2/3 名（原硬编码值语义化） */
  --rank-2-bg: #f1f5f9;
  --rank-2-text: #64748b;
  --rank-3-bg: #fef2f2;
  --rank-3-text: #991b1b;

  /* Figma 嵌入标签（紫色，原硬编码值语义化） */
  --figma-bg: #ede9fe;
  --figma-text: #7c3aed;

  /* 新品详情长图窗口（反馈#49：渐变背景 #465461 → #999999） */
  --longimg-grad-start: #465461;
  --longimg-grad-end: #999999;

  /* 项目状态徽章（反馈#55：组任务详情页） */
  --status-doing-text: #b45309;
  --status-planning-bg: #eef2ff;
  --status-planning-text: #4f46e5;

  /* Bug 反馈悬浮按钮描边（反馈#57，设计稿 #F4F4F4） */
  --bug-float-border: #f4f4f4;

  /* 吸顶工具条底色（2026-09-11 TASK-135：项目中心 .detail-tabs-bar 等 sticky 条；
     原为写死 rgba(248,248,248,.96)，暗色模式下整条发白 —— 语义化后随主题切换） */
  --sticky-bar-bg: rgba(248, 248, 248, 0.96);

  /* 阴影 */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* 圆角 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* 字体 */
  --font: 'OPPO Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;
  --transition: 0.2s ease;

  /* ===== 字号阶梯（语义化，对应设计系统-20260805.md §2） ===== */
  --fs-display: 60px;
  --fs-h1: 28px;
  --fs-h2: 26px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 16px;
  --fs-md: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-caption: 11px;

  /* 行高 */
  --lh-tight: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.8;

  /* 字重（Figma 中 600 一律用 700 实现） */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ===== 间距阶梯（4px 基准网格，对应设计系统-20260805.md §3） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== 断点（文档化常量；CSS 媒体查询须写字面量，JS 可读此值） ===== */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* 尺寸 */
  --header-h: 60px;
  --nav-h: 55px;
  --nav-pill-h: 33px;
}

/* ===== 暗色主题（TASK-114，2026-09-09：对齐设计系统 tokens/themes.json theme-dark；按时间自动切换，脚本在 layout <head> 设置 data-theme） =====
   映射：bg-card←bg-elevated #111 / text←fg #FFF / text-secondary←fg-soft #E5E5E5 / text-muted←muted #A1A1A1 / border←line #333 / chip-bg←#2A2A2A / avatar-bg←#3A3A3A */
:root[data-theme="dark"] {
  /* 中性色 */
  --bg: #272727;
  --bg-soft: #2e2e2e;
  --bg-card: #111111;
  --text: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #a1a1a1;
  --border: #333333;
  --border-light: #2a2a2a;
  --border-strong: #4a4a4a;
  --chip-bg: #2a2a2a;
  --avatar-bg: #3a3a3a;
  --hover-gray: #2a2a2a;
  --gray-disabled: #4a4a4a;
  --footer-text: #909090;

  /* 语义浅底色 → 暗色深底（保持色相，压暗保可读） */
  --green-50: #12291d;
  --green-100: #173a28;
  --gold-light: #3a2e12;
  --gold-text: #fbbf24;
  --red-light: #3a1515;
  --red-200: #5c2121;
  --link-blue: #6ea8ff;
  --figma-bg: #2a2140;
  --figma-text: #a78bfa;
  --rank-2-bg: #2a2f36;
  --rank-2-text: #94a3b8;
  --rank-3-bg: #3a2020;
  --rank-3-text: #f87171;
  --status-doing-text: #f59e0b;
  --status-planning-bg: #232838;
  --status-planning-text: #818cf8;
  --bug-float-border: #333333;

  /* 吸顶工具条底色：暗色下取 --bg(#272727) 的 96% 不透明版，与页面同调 */
  --sticky-bar-bg: rgba(39, 39, 39, 0.96);

  /* toast 在暗色下用略亮于页面的深灰（页面 --bg #272727），避免与背景糊在一起 */
  --toast-bg: #2e2e2e;
  --toast-fg: #ffffff;

  /* 深底组件在暗色下维持不变（本就深底白字）：--floatbar-bg / --video-bg / --on-dark / --badge-green / --star / --neon */

  /* 阴影：暗色下加深 */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}