/* ============================================================
   Design Tokens — 后台 UI 视觉规范 v2.0
   ============================================================
   严格遵循色值 / 按钮 / 文字规范，所有组件通过 var() 引用
   ============================================================ */

/* ===========================================
   LAYER 1: PRIMITIVE TOKENS
   =========================================== */

:root {
  /* --- 品牌绿 #1aad19 --- */
  --prm-green:       #1aad19;
  --prm-green-press: #158a14;
  --prm-green-light: #b8e6b5;
  --prm-green-pale:  #e8f7e7;

  /* --- 危险红 #e64340 --- */
  --prm-red:        #e64340;
  --prm-red-press:  #c42f2c;
  --prm-red-light:  #f5c2c0;
  --prm-red-pale:   #fdecea;

  /* --- 文字色（严格按规范） --- */
  --prm-black:      #000000;  /* 主内容、代码 */
  --prm-gray-lg1:   #d0d0d0;  /* 浅灰1 */
  --prm-gray-md1:   #999999;  /* 中灰1 */
  --prm-gray-dk1:   #666666;  /* 深灰1 */
  --prm-gray-dk2:   #555555;  /* 深灰2 */
  --prm-white:      #ffffff;

  /* --- 背景色 --- */
  --prm-bg-page:    #f2f4f3;
  --prm-bg-white:   #ffffff;
  --prm-bg-gray:    #f5f5f5;

  /* --- 边框 --- */
  --prm-border:     #e5e7eb;
  --prm-border-light: #f0f0f0;

  /* --- 间距阶梯（4px 基准） --- */
  --prm-space-1:  0.25rem;
  --prm-space-2:  0.5rem;
  --prm-space-3:  0.75rem;
  --prm-space-4:  1rem;
  --prm-space-5:  1.25rem;
  --prm-space-6:  1.5rem;
  --prm-space-8:  2rem;
  --prm-space-10: 2.5rem;

  /* --- 字号阶梯 --- */
  --prm-font-xs:   0.75rem;
  --prm-font-sm:   0.8125rem;
  --prm-font-base: 0.9375rem;
  --prm-font-md:   1.0625rem;
  --prm-font-lg:   1.25rem;
  --prm-font-xl:   1.5rem;

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

  /* --- 圆角 --- */
  --prm-radius-btn:   5px;     /* 按钮固定 */
  --prm-radius-sm:    6px;
  --prm-radius-md:    8px;
  --prm-radius-lg:    12px;
  --prm-radius-full:  9999px;

  /* --- 按钮固定尺寸 --- */
  --btn-height: 42px;
  --btn-radius: 5px;

  /* --- 持续时间 --- */
  --prm-duration-fast: 150ms;
  --prm-duration-base: 250ms;
  --prm-duration-slow: 350ms;

  /* --- 缓动函数 --- */
  --prm-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --prm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   LAYER 2: SEMANTIC TOKENS
   =========================================== */

:root {
  /* --- 文字 --- */
  --color-text-primary:    var(--prm-black);      /* 主内容 */
  --color-text-secondary:  var(--prm-gray-dk1);   /* 次要 #666 */
  --color-text-muted:      var(--prm-gray-md1);   /* 辅助 #999 */
  --color-text-light:      var(--prm-gray-lg1);   /* 浅灰 #d0d0d0 */
  --color-text-white:      var(--prm-white);

  /* --- 品牌 --- */
  --color-primary:         var(--prm-green);
  --color-primary-press:   var(--prm-green-press);
  --color-primary-light:   var(--prm-green-light);
  --color-primary-pale:    var(--prm-green-pale);

  /* --- 危险 --- */
  --color-danger:          var(--prm-red);
  --color-danger-press:    var(--prm-red-press);
  --color-danger-light:    var(--prm-red-light);
  --color-danger-pale:     var(--prm-red-pale);

  /* --- 背景 --- */
  --color-bg-page:         var(--prm-bg-page);
  --color-bg-white:        var(--prm-bg-white);
  --color-bg-gray:         var(--prm-bg-gray);

  /* --- 边框 --- */
  --color-border:          var(--prm-border);
  --color-border-light:    var(--prm-border-light);

  /* --- 阴影 --- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 24px rgba(0,0,0,0.08);

  /* --- 过渡 --- */
  --transition-fast: var(--prm-duration-fast) var(--prm-ease-out);
  --transition-base: var(--prm-duration-base) var(--prm-ease-in-out);
  --transition-slow: var(--prm-duration-slow) var(--prm-ease-in-out);
}

/* ===========================================
   LAYER 3: BUTTON COMPONENT TOKENS
   所有按钮 height:42px  border-radius:5px
   =========================================== */

:root {
  /* === (1) 绿色实心按钮 — 主操作 === */
  --btn-solid-bg:        var(--prm-green);
  --btn-solid-fg:        var(--prm-white);
  --btn-solid-bg-press:  var(--prm-green-press);
  --btn-solid-fg-press:  var(--prm-white);
  --btn-solid-bg-disabled: var(--prm-green-light);
  --btn-solid-fg-disabled: var(--prm-gray-lg1);

  /* === (2) 绿色描边按钮 — 次要/查看 === */
  --btn-outline-bg:        var(--prm-white);
  --btn-outline-fg:        var(--prm-green);
  --btn-outline-border:    var(--prm-green);
  --btn-outline-bg-press:  var(--prm-white);
  --btn-outline-fg-press:  var(--prm-green-light);
  --btn-outline-border-press: var(--prm-green-light);
  --btn-outline-bg-disabled:  var(--prm-green-pale);
  --btn-outline-fg-disabled:  var(--prm-green);

  /* === (3) 红色危险按钮 — 清空/删除 === */
  --btn-danger-bg:        var(--prm-red);
  --btn-danger-fg:        var(--prm-white);
  --btn-danger-bg-press:  var(--prm-red-press);
  --btn-danger-fg-press:  var(--prm-white);
  --btn-danger-bg-disabled: var(--prm-red-light);
  --btn-danger-fg-disabled: var(--prm-gray-lg1);
}

/* ===========================================
   LAYER 3: OTHER COMPONENT TOKENS
   =========================================== */

:root {
  /* --- 卡片 --- */
  --card-bg:     var(--prm-bg-white);
  --card-shadow: var(--shadow-sm);
  --card-radius: var(--prm-radius-lg);

  /* --- 输入框 --- */
  --input-height:    42px;
  --input-radius:    var(--prm-radius-sm);
  --input-bg:        var(--prm-bg-gray);
  --input-border:    var(--prm-border);
  --input-fg:        var(--prm-black);
  --input-placeholder: var(--prm-gray-lg1);

  /* --- 底部导航 --- */
  --nav-height:      60px;
  --nav-bg:          rgba(255,255,255,0.92);
  --nav-fg:          var(--prm-gray-md1);
  --nav-fg-active:   var(--prm-green);

  /* --- 标签 --- */
  --badge-radius:    var(--prm-radius-full);
}

/* ===========================================
   基础按钮类（所有按钮共用）
   =========================================== */

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  font-size: 14px;
  font-weight: var(--prm-weight-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

/* === 绿色实心按钮 === */
.btn-solid {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
  border: none;
}
.btn-solid:active, .btn-solid:focus-visible {
  background: var(--btn-solid-bg-press);
  color: var(--btn-solid-fg-press);
}
.btn-solid:disabled {
  background: var(--btn-solid-bg-disabled);
  color: var(--btn-solid-fg-disabled);
  cursor: not-allowed;
  opacity: 0.8;
}

/* === 绿色描边按钮 === */
.btn-outline {
  background: var(--btn-outline-bg);
  color: var(--btn-outline-fg);
  border: 1px solid var(--btn-outline-border);
}
.btn-outline:active, .btn-outline:focus-visible {
  background: var(--btn-outline-bg-press);
  color: var(--btn-outline-fg-press);
  border-color: var(--btn-outline-border-press);
}
.btn-outline:disabled {
  background: var(--btn-outline-bg-disabled);
  color: var(--btn-outline-fg-disabled);
  cursor: not-allowed;
  opacity: 0.8;
}

/* === 红色危险按钮 === */
.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border: none;
}
.btn-danger:active, .btn-danger:focus-visible {
  background: var(--btn-danger-bg-press);
  color: var(--btn-danger-fg-press);
}
.btn-danger:disabled {
  background: var(--btn-danger-bg-disabled);
  color: var(--btn-danger-fg-disabled);
  cursor: not-allowed;
  opacity: 0.8;
}

/* ===========================================
   兼容别名（旧页面 var() 不中断）
   =========================================== */

:root {
  --color-bg:              var(--color-bg-page);
  --color-surface:         var(--color-bg-white);
  --color-text:            var(--color-text-primary);
  --color-text-secondary:  var(--color-text-secondary);
  --color-text-muted:      var(--color-text-muted);
  --color-accent:          var(--color-danger);
  --color-accent-light:    var(--color-danger-pale);
  --color-primary-light:   var(--color-primary-pale);
  --color-primary-dark:    var(--color-primary-press);
  --color-border:          var(--color-border);
  --color-border-light:    var(--color-border-light);

  --radius-sm:  var(--prm-radius-sm);
  --radius-md:  var(--prm-radius-md);
  --radius-lg:  var(--prm-radius-lg);
  --radius-xl:  var(--prm-radius-full);

  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-lg);

  --transition-fast: var(--transition-fast);
  --transition-base: var(--transition-base);
  --transition-slow: var(--transition-slow);
}

/* ===========================================
   无障碍：Reduced Motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --prm-duration-fast: 0.01ms;
    --prm-duration-base: 0.01ms;
    --prm-duration-slow: 0.01ms;
  }
}