/* ============================================================
 * 指标监控 V3 Demo — 共享 Token 体系
 * 4 层结构：
 *   Layer 1 原子 token (sizes/colors/spacing)
 *   Layer 2 语义 token (alarm-levels)
 *   Layer 3 组件 token (cards/badges/buttons)
 *   Layer 4 业务 token (lvl-1/2/3)
 * BEM 命名：block__element--modifier
 * ============================================================ */

:root {
  /* ===== Layer 1 原子 token ===== */
  /* 颜色 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #d9d9d9;
  --color-gray-400: #bfbfbf;
  --color-gray-500: #8c8c8c;
  --color-gray-600: #595959;
  --color-gray-700: #262626;
  --color-gray-800: #1f1f1f;
  --color-gray-900: #141414;

  /* 商务蓝主色（导航渐变） */
  --color-blue-700: #1a3a6e;
  --color-blue-500: #1d5bb5;
  --color-blue-300: #5b8dd6;
  --color-blue-100: #e8f1fb;

  /* 告警四色（量测 + 过程共用） */
  --color-green: #52c41a;    /* 正常 */
  --color-yellow: #ffc53d;   /* Ⅲ级 */
  --color-orange: #fa8c16;   /* Ⅱ级 */
  --color-red: #ff4d4f;      /* Ⅰ级 */
  --color-red-deep: #d9363e; /* 批量异常深红 */

  /* 告警四色 + 浅色（用于 badge 背景/边框/状态圆点光晕） */
  --color-red-50: #fff1f0;
  --color-orange-50: #fff7e6;
  --color-orange-200: #ffd591;
  --color-yellow-50: #fffbe6;
  --color-green-50: #f6ffed;

  /* 热力图色谱（蓝→青→绿→黄→红） */
  --heat-0: #2c5fa6;
  --heat-1: #4ec0c2;
  --heat-2: #79c75a;
  --heat-3: #f4d03f;
  --heat-4: #f39c12;
  --heat-5: #e74c3c;

  /* 字号 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-xxl: 28px;

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

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* 圆角 */
  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 尺寸 */
  --size-navbar-height: 56px;
  --size-filter-height: 56px;
  --size-tab-height: 44px;
  --size-card-min-width: 220px;

  /* ===== Layer 2 语义 token (告警等级) ===== */
  --alarm-normal: var(--color-green);
  --alarm-lvl-3: var(--color-yellow);
  --alarm-lvl-2: var(--color-orange);
  --alarm-lvl-1: var(--color-red);
  --alarm-batch: var(--color-red-deep);

  /* ===== Layer 3 组件 token ===== */
  /* card */
  --card-bg: var(--color-white);
  --card-border: var(--color-gray-200);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-base);
  --card-padding: var(--space-5);
  --card-color-stripe-width: 4px;

  /* badge */
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-1);
  --badge-radius: var(--radius-base);
  --badge-font-size: var(--font-size-xs);

  /* button */
  --button-padding-x: var(--space-4);
  --button-padding-y: var(--space-2);
  --button-radius: var(--radius-md);
  --button-font-size: var(--font-size-base);
  --button-primary-bg: var(--color-blue-500);
  --button-primary-color: var(--color-white);
  --button-default-bg: var(--color-white);
  --button-default-border: var(--color-gray-300);
  --button-default-color: var(--color-gray-700);
  --button-disabled-bg: var(--color-gray-100);
  --button-disabled-color: var(--color-gray-400);

  /* tab */
  --tab-bg: var(--color-white);
  --tab-active-color: var(--color-blue-500);
  --tab-inactive-color: var(--color-gray-600);
  --tab-border-active: var(--color-blue-500);
  --tab-border-inactive: var(--color-gray-200);

  /* input */
  --input-bg: var(--color-white);
  --input-border: var(--color-gray-300);
  --input-radius: var(--radius-base);
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-focus-border: var(--color-blue-500);

  /* table */
  --table-bg: var(--color-white);
  --table-header-bg: var(--color-gray-50);
  --table-border: var(--color-gray-200);
  --table-row-hover: var(--color-gray-50);
  --table-cell-padding: var(--space-3);
}

/* ===== Layer 4 业务 token：lvl-1/2/3 ===== */
/* 用语义 token 别名，便于业务层调用 */
:root {
  --lvl-1: var(--alarm-lvl-1);
  --lvl-2: var(--alarm-lvl-2);
  --lvl-3: var(--alarm-lvl-3);
  --lvl-normal: var(--alarm-normal);
  --lvl-batch: var(--alarm-batch);

  /* 状态圆点光晕（与 lvl 同色 15% alpha） */
  --dot-glow-lvl-1: rgba(255, 77, 79, 0.15);
  --dot-glow-lvl-2: rgba(250, 140, 22, 0.15);
  --dot-glow-lvl-3: rgba(255, 197, 61, 0.15);
  --dot-glow-normal: rgba(82, 196, 26, 0.15);
}