/* EdgeCloud 设计系统 — CSS Tokens
   来源：design-system.md。默认(:root)为浅色模式；[data-theme="dark"] 覆盖为深色模式。
   任何原型页面都应先加载本文件，再加载 base.css。 */

:root {
  /* 品牌色 */
  --brand-50: #EEF3FF;
  --brand-500: #2E6BFF;
  --brand-600: #1E54D6;
  --brand-400: #5C90FF;

  /* 中性色阶梯（浅色模式） */
  --surface-canvas: #FFFFFF;
  --surface-raised: #F7F8FA;
  --surface-sunken: #F1F2F5;
  --border-default: #E4E7EC;
  --border-strong: #CBD0DA;
  --text-primary: #12141A;
  --text-secondary: #4B5160;
  --text-muted: #6B7280;
  --text-on-brand: #FFFFFF;

  /* 语义色（文字/图标版，浅色模式） */
  --success: #1A7F4B;
  --warning: #B45309;
  --danger: #D92D20;
  --info: #0A5F57;
  /* 语义色实心徽章底色 */
  --success-solid: #1A7F4B;
  --warning-solid: #B45309;
  --danger-solid: #D92D20;
  --info-solid: #0A5F57;

  /* 链接/交互态使用的品牌色（浅色模式用更深的 600，保证对比度余量） */
  --brand-text: var(--brand-600);

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

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

  /* 阴影（浅色模式） */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);

  /* 字体 */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-display-size: 56px; --text-display-lh: 64px;
  --text-h1-size: 32px; --text-h1-lh: 40px;
  --text-h2-size: 24px; --text-h2-lh: 32px;
  --text-h3-size: 18px; --text-h3-lh: 26px;
  --text-body-size: 14px; --text-body-lh: 22px;
  --text-body-lg-size: 16px; --text-body-lg-lh: 24px;
  --text-small-size: 13px; --text-small-lh: 20px;
  --text-caption-size: 12px; --text-caption-lh: 16px;

  --transition-fast: 120ms ease-out;
  --transition-base: 180ms ease-out;
}

[data-theme="dark"] {
  --surface-canvas: #0B0D12;
  --surface-raised: #14161D;
  --surface-sunken: #1A1D26;
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --text-primary: #F3F4F6;
  --text-secondary: #B4B8C2;
  --text-muted: #8B8F99;

  --success: #3DD68C;
  --warning: #F5A524;
  --danger: #F97066;
  --info: #2DD4BF;
  --success-solid: #146B3E;
  --warning-solid: #8A4207;
  --danger-solid: #B0221A;
  --info-solid: #0D8377;

  --brand-50: #0E1730;
  --brand-text: var(--brand-400);

  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
}