/**
 * Design Token 体系
 * 所有颜色/间距/圆角/字号/z-index 统一从这里引用
 * 优先级低于 Tailwind（避免 Tailwind runtime 初始化覆盖）
 */

:root {
  /* ========== 品牌色 ========== */
  --color-brand:           #10b981;
  --color-brand-hover:     #34d399;
  --color-brand-dim:       rgba(16, 185, 129, 0.15);

  /* ========== 文字色 ========== */
  --color-text-primary:    #e6edf3;   /* 标题、关键信息 */
  --color-text-secondary:  #94a3b8;   /* 正文、说明 */
  --color-text-tertiary:   #8b929a;   /* 辅助信息（对比度 ≥4.5:1 on #12141d） */
  --color-text-disabled:   #484f58;   /* 禁用态 */

  /* ========== 背景色 ========== */
  --color-bg-base:         #0a0c10;
  --color-bg-surface:      #12141d;   /* 卡片、面板 */
  --color-bg-elevated:     #161b22;   /* Modal、弹层 */

  /* ========== 边框色 ========== */
  --color-border-default:  rgba(48, 54, 61, 0.8);
  --color-border-subtle:   rgba(48, 54, 61, 0.4);

  /* ========== 状态色（语义统一） ========== */
  --color-free:            #10b981;   /* 空闲 */
  --color-charging:        #22d3ee;   /* 充电中 */
  --color-occupied:        #f97316;   /* 占位 */
  --color-offline:         #64748b;   /* 离线 */
  --color-success:         #34d399;
  --color-warning:         #fbbf24;
  --color-error:           #ef4444;

  /* ========== 间距（8px 网格） ========== */
  --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;

  /* ========== 圆角 ========== */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-full: 9999px;

  /* ========== 字号 ========== */
  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-lg:    1.125rem;  /* 18px */
  --font-size-xl:    1.25rem;   /* 20px */
  --font-size-2xl:   1.5rem;    /* 24px */

  /* ========== z-index ========== */
  --z-base:      1;
  --z-content:   10;
  --z-sticky:    30;
  --z-overlay:   100;
  --z-modal:     200;
  --z-toast:     300;
  --z-max:       9999;

  /* ========== 阴影 ========== */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 24px 80px rgba(0, 0, 0, 0.5);
}