/**
 * 可观测视觉规范 — Design Tokens
 * @see docs/design-system/可观测视觉规范.md
 * Figma: https://www.figma.com/design/UUCJnkOvZn0bIOeBtTDmjk
 *
 * 层级：腾讯基础 Token（--t-*）→ 语义 UI（--text-* / --bg-*）→ 可观测业务语义（--obs-*）
 */

:root {
  /* ========== 腾讯品牌色（基础 Token） ========== */
  --t-blue: #0052d9;
  --t-blue-light: #e8f0fe;
  --t-blue-hover: #0034b5;
  --t-green: #07c160;
  --t-green-light: #e8f8ef;
  --t-green-hover: #06ad56;
  --t-orange: #ed6a0c;
  --t-orange-light: #fff3e0;
  --t-red: #e34d59;
  --t-red-light: #ffece8;

  /* ========== 腾讯灰度（10 级） ========== */
  --t-gray-1: #1a1a1a;
  --t-gray-2: #333333;
  --t-gray-3: #5c5c5c;
  --t-gray-4: #888888;
  --t-gray-5: #aaaaaa;
  --t-gray-6: #cccccc;
  --t-gray-7: #e7e7e7;
  --t-gray-8: #f3f3f3;
  --t-gray-9: #f7f7f7;
  --t-gray-10: #fafafa;

  /* ========== 语义 UI（通用界面） ========== */
  --text-primary: var(--t-gray-1);
  --text-secondary: var(--t-gray-3);
  --text-tertiary: var(--t-gray-4);
  --text-placeholder: var(--t-gray-5);
  --bg-page: var(--t-gray-10);
  --bg-card: #ffffff;
  --bg-hover: var(--t-gray-8);
  --border-primary: var(--t-gray-7);
  --border-secondary: var(--t-gray-8);

  /* ========== 可观测中性色（文字层级，Figma 原稿） ========== */
  --obs-neutral-900: #232a35;
  --obs-neutral-800: #2c3645;
  --obs-neutral-600: #596376;
  --obs-neutral-500: #757f92;
  --obs-neutral-400: #8e939e;

  /* ========== 可观测功能色（业务语义，告警/状态） ========== */
  --obs-error: #f55863;
  --obs-warning: #ffa54c;
  --obs-brand: #1f69ff;
  --obs-highlight: #ffd940;
  --obs-pending: #2353b5;
  --obs-processing: #97a8cb;
  --obs-success: #00a870;
  --obs-surface-selected: #e5efff;

  /* 页面/容器（可观测后台沿用，可与 --bg-* 并存） */
  --obs-bg-page: #f5f6f8;
  --obs-bg-card: #ffffff;
  --obs-border: rgba(0, 0, 0, 0.06);
  --obs-text-on-brand: #ffffff;
  --obs-bg-table-header: var(--t-gray-10);
  --obs-bg-table-row-hover: #fafbfc;
  --obs-bg-muted: #f0f2f5;
  --obs-bg-tag-neutral: #f0f1f3;
  --obs-bg-placeholder: #e8eaed;
  --obs-bg-subtle: #eef0f4;
  --obs-bg-icon-ph: #eaeaea;
  --obs-brand-light: #b5d2fc;
  --obs-workbench-bg: #e5effe;

  /* ========== 图表 / 监控色板 ========== */
  --obs-chart-1: #5b8ff9;
  --obs-chart-2: #61ddaa;
  --obs-chart-3: #65789b;
  --obs-chart-4: #796ced;
  --obs-chart-5: #008685;
  --obs-chart-6: #f08bb4;

  /* ========== 字体 ========== */
  --font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC',
    'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  /* ========== 字号阶梯（可观测视觉规范 §3，4px 基准） ========== */
  --font-size-xs: 12px;   /* 标签、备注 */
  --font-size-sm: 13px;   /* 辅助说明 */
  --font-size-base: 14px; /* 正文（可观测默认） */
  --font-size-md: 15px;   /* 描述文字 */
  --font-size-lg: 16px;   /* 导航、按钮 */
  --font-size-xl: 18px;   /* 区块标题 */
  --font-size-2xl: 20px;  /* 小标题 */
  --font-size-3xl: 24px;  /* 页级标题 */
  --font-size-4xl: 28px;  /* 区块标题（大） */
  --font-size-5xl: 36px;  /* 大标题 */
  --font-size-6xl: 48px;  /* 营销 Hero */

  /* 场景语义别名（引用阶梯，业务代码优先使用） */
  --font-size-label: var(--font-size-xs);
  --font-size-caption: var(--font-size-sm);
  --font-size-body: var(--font-size-base);
  --font-size-desc: var(--font-size-md);
  --font-size-nav: var(--font-size-lg);
  --font-size-section: var(--font-size-xl);
  --font-size-subtitle: var(--font-size-2xl);
  --font-size-page: var(--font-size-3xl);
  --font-size-block: var(--font-size-4xl);
  --font-size-display: var(--font-size-5xl);
  --font-size-hero: var(--font-size-6xl);

  /* 兼容旧名 */
  --font-size-title-page: var(--font-size-page);
  --font-size-title-section: var(--font-size-nav);

  --line-height-body: 22px;
  --line-height-title-section: 24px;
  --line-height-tight: 1.3;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* ========== 间距（4px 基准） ========== */
  --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;
  --space-20: 80px;
  /* 别名（兼容旧代码） */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-6);

  /* ========== 圆角 ========== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-round: 999px;
  /* 可观测侧栏等紧凑场景 */
  --border-radius-sm: 2px;

  /* ========== 阴影 ========== */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-4: 0 8px 24px 0 rgba(0, 0, 0, 0.1);

  /* ========== 动效 ========== */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* ========== 布局（可观测 B 端） ========== */
  --table-row-height: 40px;
  --table-cell-padding-x: 16px;
  --header-height: 46px;
  --header-content-height: 79px;
  --topbar-height: 48px;
  --navbar-height: 56px;
  --sidebar-width: 200px;
  --sidebar-width-collapsed: 64px;
  --sidebar-item-height: 40px;
  --sidebar-group-height: 36px;
  --sidebar-item-inset: 8px;
  --sidebar-item-radius: 2px;
  --obs-sidebar-hover: #f7f8fa;
  --drawer-width-md: 560px;
  --drawer-width-lg: 800px;
  --drawer-header-height: 56px;
  --drawer-footer-height: 72px;

  /* ========== 组件 ========== */
  --control-height: 32px;
  --control-height-sm: 24px;
  --tag-height-sm: 20px;
  --tag-height-md: 24px;
  --tag-padding-x-sm: 4px;
  --tag-padding-x-md: 8px;
  --select-dropdown-max-height: 264px;

  /* ========== 渐变与特效 ========== */
  --gradient-brand: linear-gradient(135deg, var(--t-blue) 0%, var(--t-green) 100%);
  --gradient-hero-card: linear-gradient(135deg, #ffffff 0%, #f0f5ff 50%, #f5f0ff 100%);
  --gradient-login-brand: linear-gradient(135deg, var(--obs-brand) 0%, var(--obs-pending) 100%);
  --gradient-workbench-page: rgb(249 252 255 / 50%) 0%, rgb(230 225 255 / 50%) 100%;
  --gradient-workbench-card: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.72) 0%,
    hsla(0, 0%, 100%, 0.48) 14%,
    hsla(0, 0%, 100%, 0.2) 47%,
    hsla(0, 0%, 100%, 0.48) 99%
  );
  --gradient-workbench-service-border: linear-gradient(
    135deg,
    #1a5ce6 0%,
    #3568f0 25%,
    #6d7af5 50%,
    #8f6ef0 75%,
    #5b52e8 100%
  );
  --gradient-workbench-service-bg: linear-gradient(
    90deg,
    rgba(225, 238, 255, 0.98) 0%,
    rgba(236, 228, 252, 0.96) 100%
  );
  --backdrop-nav: blur(12px) saturate(150%);
  --backdrop-float: blur(8px);
  --backdrop-modal: blur(16px);
  --backdrop-workbench: blur(16px) saturate(180%);
  --shadow-workbench-card: 0 1px 16px 0 rgba(30, 118, 255, 0.13);
  --shadow-workbench-service-hover: 0 2px 20px 0 rgba(31, 105, 255, 0.18);
  --shadow-brand-sm: 0 2px 8px rgba(31, 105, 255, 0.08);

  /* 工作台别名（workbench.css 引用） */
  --wb-topbar-height: var(--topbar-height);
  --wb-card-shadow: var(--shadow-workbench-card);
  --wb-card-backdrop: var(--backdrop-workbench);
  --wb-card-bg: var(--gradient-workbench-card);
  --wb-service-block-border-hover: var(--gradient-workbench-service-border);
  --wb-service-block-bg-hover: var(--gradient-workbench-service-bg);
  --wb-service-block-shadow-hover: var(--shadow-workbench-service-hover);
}