/*
 * 项目: 客服录音系统
 * 由 scaffold-organizer-admin.sh 从 prototypes/师傅端APP/收纳师管理后台/design-tokens.css 复制（只读，未改源文件）。
 * 换色：品牌色 --color-brand-*、后台信息蓝 --color-info-*、工作台 --color-bg-admin-* 等；布局 token 建议保持。
 */

:root {
  /* ============================================================
   * NETWORK Yongpeng HTML 原型 · 设计令牌（与 organizer-common 及 components/html 数值对齐）
   * 用法：先于 organizer-common.css 引入；自定义样式统一使用 var(--*) 引用。
   * ============================================================ */

  /* ---------- 颜色 · 品牌（红橙 CPS 主色） ---------- */
  --color-brand-main: #ff4b3e;
  --color-brand-light: #fff0ee;
  --color-brand-border: rgba(255, 75, 62, 0.28);

  /* ---------- 颜色 · 状态 · 成功 ---------- */
  --color-success-main: #52c41a;
  --color-success-light: rgba(82, 196, 26, 0.1);
  --color-success-border: rgba(82, 196, 26, 0.2);
  --color-success-text: #2e7d32;

  /* ---------- 颜色 · 状态 · 警告 ---------- */
  --color-warning-main: #ff9500;
  --color-warning-light: rgba(255, 149, 0, 0.1);
  --color-warning-border: rgba(255, 149, 0, 0.2);
  --color-warning-text: #ff8f00;

  /* ---------- 颜色 · 状态 · 错误 / 危险 ---------- */
  --color-error-main: #ff4d4f;
  --color-error-light: rgba(255, 77, 79, 0.1);
  --color-error-border: rgba(255, 77, 79, 0.28);
  --color-error-text: #cf1322;

  /* ---------- 颜色 · 状态 · 信息 / 链接蓝（NETWORK 后台、Tailwind 侧栏选中） ---------- */
  --color-info-main: #1890ff;
  --color-info-light: #eef4ff;
  --color-info-border: rgba(64, 128, 255, 0.35);
  --color-info-text: #096dd9;

  /* ---------- 颜色 · 状态 · 紫色（绑定 / 团队等） ---------- */
  --color-purple-main: #6366f1;
  --color-purple-light: rgba(99, 102, 241, 0.12);
  --color-purple-border: rgba(99, 102, 241, 0.28);
  --color-purple-text: #3730a3;

  /* ---------- 颜色 · 营销价 / 商品强调价（可与品牌区分） ---------- */
  --color-price-main: #f43f5e;
  --color-price-light: #fef2f2;
  --color-price-border: rgba(244, 63, 94, 0.25);

  /* ---------- 颜色 · 背景层级（画布 / 页 / 卡 / 弱背景 / 通知条） ---------- */
  --color-bg-canvas: #f5f7f9;
  --color-bg-page: #f5f7f9;
  --color-bg-card: #ffffff;
  --color-bg-muted: #fafafa;
  --color-bg-notice: #fff8f0;
  /* 后台桌面壳（components/html/app-layout、Dashboard）：浅灰工作台 */
  --color-bg-admin-shell: #f4f5f7;
  --color-bg-admin-main: #f5f6f8;

  /* ---------- 颜色 · 文字层级 ---------- */
  --color-text-primary: #222222;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-placeholder: #cccccc;
  --color-text-inverse: #ffffff;
  /* 后台表格标题字色（components/html/resource-table-data） */
  --color-text-admin-strong: #1a1a1a;
  --color-text-admin-muted: #8c8c8c;

  /* ---------- 颜色 · 边框 / 分割线 ---------- */
  --color-border-default: #eeeeee;
  --color-border-muted: #f0f0f0;
  --color-border-tabbar: #e8eaed;
  --color-border-notice: #f0e6d8;
  --color-border-card: rgba(0, 0, 0, 0.03);
  --color-border-admin: rgba(229, 231, 235, 1);

  /* ---------- 圆角（按场景：控件 / 卡 / 大卡 / Hero） ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---------- 阴影（克制分层：悬浮 / 卡 / 弹层） ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.22);

  /* ---------- 间距（4px 网格） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---------- 字号层级 ---------- */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  /* 正文辅助（后台表单、表格单元、弹窗键值对；见 ProductDetailModal / ResourceDetailModal） */
  --font-size-body-sm: 13px;

  /* ---------- 字重 ---------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;
  --font-weight-heavy: 700;

  /* ---------- 动效（时长 + 曲线） ---------- */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.28s;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- 移动端布局常量（448px 壳 + Tabbar + Hero + Safe Area） ---------- */
  --layout-shell-max: 448px;
  --layout-tabbar-height: 64px;
  --layout-hero-padding-x: 16px;
  --layout-hero-padding-top: 16px;
  --layout-hero-padding-bottom: 0;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --layout-safe-top-padding: max(8px, var(--safe-area-inset-top));
  --layout-safe-bottom-padding: max(12px, var(--safe-area-inset-bottom));

  /* ---------- 后台 · Tab · 文档区多页签（Tabs.tsx / components/html/tabs.html） ---------- */
  /* 顶栏文档 Tab：高度 34px，选中圆角顶 16px，底色 #eef4ff */
  --tab-doc-height: 34px;
  --tab-doc-radius-top: 16px;
  --tab-doc-font-size: var(--font-size-base);
  --tab-doc-active-bg: #eef4ff;
  --tab-doc-active-text: var(--color-info-main);

  /* ---------- 后台 · Tab · 列表白卡内一级 Tab（tabs-resource.html） ---------- */
  /* 底边 2px 高亮，未选中灰底 gray-50 */
  --tab-inline-item-py: 12px;
  --tab-inline-item-px: 20px;
  --tab-inline-font-size: var(--font-size-base);
  --tab-inline-indicator-width: 2px;

  /* ---------- 后台 · Tab · 详情弹窗分段（ResourceDetailModal / ProductDetailModal） ---------- */
  /* 「文件夹页签」：上圆角 6px，底边与内容区同色；未选中 #f5f5f5 */
  --tab-segment-font-size: var(--font-size-body-sm);
  --tab-segment-radius-top: 6px;
  --tab-segment-border: #e8e8e8;
  --tab-segment-inactive-bg: #f5f5f5;
  --tab-segment-inactive-text: #666666;
  --tab-segment-active-bg: #ffffff;
  --tab-segment-active-text: var(--color-info-main);

  /* ---------- 后台 · B 端列表页壳 + 工具栏（ProductTable / ResourceTable 母版） ---------- */
  /* 工作台灰底上的白卡片；工具栏一行：左搜索+更多筛选+状态快筛，右四个图标按钮 */
  --list-page-shell-bg: #f4f5f7;
  --list-page-shell-px: 16px;
  --list-page-shell-pb: 12px;
  --list-card-bg: #ffffff;
  --list-card-radius: 12px;
  --list-toolbar-padding: 12px;
  --list-search-field-width: 200px;
  --list-search-bg: #f7f7fa;
  --list-search-hover-bg: #ebebeb;
  --list-search-focus-bg: #f7f7fa;
  --list-control-text: #666666;
  --list-control-font-size: var(--font-size-body-sm);
  --list-quickfilter-font-size: var(--font-size-sm);
  --list-chip-active-bg: #eef4ff;
  --list-chip-active-text: var(--color-info-main);
  --list-chip-inactive-bg: #f7f7fa;
  --list-chip-inactive-text: #666666;
  --list-chip-count-active: rgba(24, 144, 255, 0.8);
  --list-chip-count-inactive: #999999;
  --list-icon-row-color: #999999;
  --list-icon-btn-bg: #f7f7fa;
  --list-icon-btn-hover-bg: #ebebeb;
  /* 商品管理顶部「品牌」子 Tab（可选；资源总表无此段） */
  --list-brand-tab-height: 35px;
  --list-brand-tab-radius-top: 8px;
  --list-brand-inactive-bg: #f2f3f5;

  /* ---------- 后台 · 图表规范（与 Dashboard.tsx 对齐） ---------- */
  --chart-card-bg: #ffffff;
  --chart-card-radius: 10px;
  --chart-title-color: #1a1a1a;
  --chart-subtitle-color: #8c8c8c;
  --chart-axis-text: #8c8c8c;
  --chart-grid-line: #f0f0f0;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #f0f0f0;

  /* 业务色板（折线/柱状/面积渐变） */
  --chart-blue: #1890ff;
  --chart-green: #10b981;
  --chart-orange: #f59e0b;
  --chart-red: #f43f5e;
  --chart-purple: #a855f7;
  --chart-pink: #e853b0;

  /* 折线/面积统一参数 */
  --chart-line-width: 2px;
  --chart-dot-size: 4px;
  --chart-area-opacity-start: 0.25;
  --chart-area-opacity-end: 0;

  /* ---------- 详情弹窗 · 壳体（与 React Dialog 版一致，纯 HTML 可对齐数值） ---------- */
  --modal-detail-min-width: 880px;
  --modal-detail-max-height: 90vh;
  --modal-detail-radius: var(--radius-md);
  --modal-detail-border: #e5e5e5;
  --modal-detail-header-bg: #fafafa;
  --modal-detail-header-border: #f0f0f0;
  --modal-detail-body-padding: var(--space-5);
}