/* Cruna Dev Dashboard — 设计令牌 (三级架构 · 浅色模式) */

:root {
  /* ═══ 第一层: 原始值 (Primitive) ═══ */

  /* 紫色 — 品牌主色 */
  --purple-900: #4a3d5c;
  --purple-700: #6e5a8e;
  --purple-500: #7c5cad;
  --purple-400: #8a6db7;
  --purple-300: #a58ecb;
  --purple-200: #cdbfe9;
  --purple-100: #e8e0f7;
  --purple-50:  #f4f0fb;

  /* 灰色 */
  --gray-900: #303133;
  --gray-700: #606266;
  --gray-500: #909399;
  --gray-300: #c0c4cc;
  --gray-200: #e4e7ed;
  --gray-100: #f0f2f5;
  --gray-50:  #f5f7fa;
  --gray-25:  #fafbfc;

  /* 语义色 — 原始 */
  --green-500: #67c23a;
  --orange-500: #e6a23c;
  --red-500: #f56c6c;

  /* ═══ 第二层: 语义值 (Semantic) — 浅色模式 ═══ */

  /* 品牌 */
  --color-primary:            var(--purple-500);
  --color-primary-hover:      var(--purple-400);
  --color-primary-bg:         var(--purple-50);
  --color-primary-light:      var(--purple-100);
  --color-primary-ghost:      rgba(124, 92, 173, 0.04);
  --color-primary-ghost-hover: rgba(124, 92, 173, 0.08);

  /* 文字 */
  --color-text-primary:   var(--gray-900);
  --color-text-regular:   var(--gray-700);
  --color-text-secondary: var(--gray-500);
  --color-text-muted:     var(--gray-300);

  /* 背景 */
  --color-bg-page:    var(--gray-50);
  --color-bg-card:    #ffffff;
  --color-bg-hover:   var(--gray-100);
  --color-bg-inset:   var(--gray-25);

  /* 边框 */
  --color-border:       var(--gray-200);
  --color-border-light: #f2f3f5;

  /* 语义状态 */
  --color-success: var(--green-500);
  --color-warning: var(--orange-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--purple-500);

  /* ═══ 字体 ═══ */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ═══ 字号 ═══ */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;

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

  /* ═══ 行高 ═══ */
  --leading-tight:  1.4;
  --leading-normal: 1.6;

  /* ═══ 间距 (4px 基数) ═══ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  /* ═══ 圆角 ═══ */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-base: 8px;
  --radius-lg:   10px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* ═══ 阴影 ═══ */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 6px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 12px rgba(124, 92, 173, 0.1);
  --shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.15);

  /* ═══ 动效 ═══ */
  --duration-fast:   0.15s;
  --duration-normal: 0.18s;
  --duration-expand: 0.25s;
  --duration-fade:   0.3s;
  --duration-pulse:  2s;
  --ease-default:    ease;

  /* ═══ 第三层: 组件值 (Component) ═══ */

  /* 状态圆点 */
  --dot-green-glow:  rgba(103, 194, 58, 0.4);
  --dot-red-glow:    rgba(245, 108, 108, 0.4);

  /* 徽章 */
  --badge-completed-bg:  rgba(103, 194, 58, 0.12);
  --badge-processing-bg: rgba(64, 159, 255, 0.12);
  --badge-pending-bg:    rgba(230, 162, 60, 0.12);
  --badge-failed-bg:     rgba(245, 108, 108, 0.12);

  /* 端口标签 */
  --port-tag-bg:    var(--purple-50);
  --port-tag-color: var(--purple-500);

  /* 快捷链接 */
  --link-bg:       var(--purple-50);
  --link-bg-hover: var(--purple-100);
  --link-border:   var(--purple-100);
}