/**
 * AKSRT Color Utilities — 多色按钮 / 渐变按钮 / 文字渐变 / Badge
 * ------------------------------------------------------------
 * 所有颜色走 CSS 变量（定义在 tokens.css），不硬编码十六进制。
 */

/* ============================================================
 * 1. 多色按钮 — .aksrt-btn--{color}
 * ============================================================ */
.aksrt-btn--rose   { background: var(--aksrt-rose);   color: #fff; }
.aksrt-btn--rose:hover,
.aksrt-btn--rose:focus-visible { background: #e11d48; }

.aksrt-btn--blue   { background: var(--aksrt-blue);   color: #fff; }
.aksrt-btn--blue:hover,
.aksrt-btn--blue:focus-visible { background: #2563eb; }

.aksrt-btn--green  { background: var(--aksrt-green);  color: #fff; }
.aksrt-btn--green:hover,
.aksrt-btn--green:focus-visible { background: #059669; }

.aksrt-btn--orange { background: var(--aksrt-orange); color: #fff; }
.aksrt-btn--orange:hover,
.aksrt-btn--orange:focus-visible { background: #ea580c; }

.aksrt-btn--purple { background: var(--aksrt-purple); color: #fff; }
.aksrt-btn--purple:hover,
.aksrt-btn--purple:focus-visible { background: #7c3aed; }

.aksrt-btn--cyan   { background: var(--aksrt-cyan);   color: #fff; }
.aksrt-btn--cyan:hover,
.aksrt-btn--cyan:focus-visible { background: #0891b2; }

.aksrt-btn--yellow { background: var(--aksrt-yellow); color: #422006; }
.aksrt-btn--yellow:hover,
.aksrt-btn--yellow:focus-visible { background: #ca8a04; color: #fff; }

.aksrt-btn--red    { background: var(--aksrt-red);    color: #fff; }
.aksrt-btn--red:hover,
.aksrt-btn--red:focus-visible { background: #dc2626; }

.aksrt-btn--teal   { background: var(--aksrt-teal);   color: #fff; }
.aksrt-btn--teal:hover,
.aksrt-btn--teal:focus-visible { background: #0d9488; }

.aksrt-btn--indigo { background: var(--aksrt-indigo); color: #fff; }
.aksrt-btn--indigo:hover,
.aksrt-btn--indigo:focus-visible { background: #4f46e5; }

.aksrt-btn--pink   { background: var(--aksrt-pink);   color: #fff; }
.aksrt-btn--pink:hover,
.aksrt-btn--pink:focus-visible { background: #db2777; }

/* Soft variant — 浅色背景 + 深色文字 */
.aksrt-btn--rose-soft   { background: var(--aksrt-rose-soft);   color: var(--aksrt-rose); }
.aksrt-btn--blue-soft   { background: var(--aksrt-blue-soft);   color: var(--aksrt-blue); }
.aksrt-btn--green-soft  { background: var(--aksrt-green-soft);  color: var(--aksrt-green); }
.aksrt-btn--orange-soft { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
.aksrt-btn--purple-soft { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
.aksrt-btn--cyan-soft   { background: var(--aksrt-cyan-soft);   color: var(--aksrt-cyan); }
.aksrt-btn--yellow-soft { background: var(--aksrt-yellow-soft); color: #92400e; }
.aksrt-btn--red-soft    { background: var(--aksrt-red-soft);    color: var(--aksrt-red); }
.aksrt-btn--teal-soft   { background: var(--aksrt-teal-soft);   color: var(--aksrt-teal); }
.aksrt-btn--indigo-soft { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
.aksrt-btn--pink-soft   { background: var(--aksrt-pink-soft);   color: var(--aksrt-pink); }

/* ============================================================
 * 2. 渐变按钮 — .aksrt-btn--grad-{name}
 * ============================================================ */
.aksrt-btn--grad-vip {
  background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
  color: #5a3d00;
  border: none;
}

.aksrt-btn--grad-sunset {
  background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
  color: #fff;
  border: none;
}

.aksrt-btn--grad-ocean {
  background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
  color: #fff;
  border: none;
}

.aksrt-btn--grad-forest {
  background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
  color: #064e3b;
  border: none;
}

.aksrt-btn--grad-night {
  background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
  color: #4c1d95;
  border: none;
}

.aksrt-btn--grad-fire {
  background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
  color: #fff;
  border: none;
}

.aksrt-btn--grad-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
  color: var(--color-on-primary);
  border: none;
}

/* 渐变按钮 hover — 亮度微调 */
.aksrt-btn--grad-vip:hover,
.aksrt-btn--grad-sunset:hover,
.aksrt-btn--grad-ocean:hover,
.aksrt-btn--grad-forest:hover,
.aksrt-btn--grad-night:hover,
.aksrt-btn--grad-fire:hover,
.aksrt-btn--grad-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================================
 * 3. 文字渐变 — .aksrt-text-grad-{name}
 * ============================================================ */
.aksrt-text-grad-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-vip {
  background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-sunset {
  background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-ocean {
  background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-forest {
  background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-night {
  background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aksrt-text-grad-fire {
  background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
 * 4. Badge 系统 — .aksrt-badge / .aksrt-badge--{color}
 * ============================================================ */
.aksrt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--aksrt-badge-h, 22px);
  padding: 0 8px;
  border-radius: var(--radius-pill, 100px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.aksrt-badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.aksrt-badge--success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.aksrt-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.aksrt-badge--error   { background: rgba(239, 68, 68, 0.12);  color: var(--color-error); }
.aksrt-badge--info    { background: rgba(59, 130, 246, 0.12);  color: var(--color-info); }

.aksrt-badge--rose    { background: var(--aksrt-rose-soft);   color: var(--aksrt-rose); }
.aksrt-badge--blue    { background: var(--aksrt-blue-soft);   color: var(--aksrt-blue); }
.aksrt-badge--green   { background: var(--aksrt-green-soft);  color: var(--aksrt-green); }
.aksrt-badge--orange  { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
.aksrt-badge--purple  { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
.aksrt-badge--cyan    { background: var(--aksrt-cyan-soft);   color: var(--aksrt-cyan); }
.aksrt-badge--yellow  { background: var(--aksrt-yellow-soft); color: #92400e; }
.aksrt-badge--red     { background: var(--aksrt-red-soft);    color: var(--aksrt-red); }
.aksrt-badge--teal    { background: var(--aksrt-teal-soft);   color: var(--aksrt-teal); }
.aksrt-badge--indigo  { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
.aksrt-badge--pink    { background: var(--aksrt-pink-soft);   color: var(--aksrt-pink); }

/* 渐变 Badge */
.aksrt-badge--grad-vip {
  background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
  color: #5a3d00;
}

.aksrt-badge--grad-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
  color: var(--color-on-primary);
}

/* Solid badge variant — 纯色背景 + 白色文字 */
.aksrt-badge--solid-primary { background: var(--color-primary); color: #fff; }
.aksrt-badge--solid-success { background: var(--color-success); color: #fff; }
.aksrt-badge--solid-warning { background: var(--color-warning); color: #fff; }
.aksrt-badge--solid-error   { background: var(--color-error);   color: #fff; }
.aksrt-badge--solid-info    { background: var(--color-info);    color: #fff; }
.aksrt-badge--solid-rose    { background: var(--aksrt-rose);    color: #fff; }
.aksrt-badge--solid-blue    { background: var(--aksrt-blue);    color: #fff; }
.aksrt-badge--solid-green   { background: var(--aksrt-green);   color: #fff; }
.aksrt-badge--solid-orange  { background: var(--aksrt-orange);  color: #fff; }
.aksrt-badge--solid-purple  { background: var(--aksrt-purple);  color: #fff; }
.aksrt-badge--solid-cyan    { background: var(--aksrt-cyan);    color: #fff; }
.aksrt-badge--solid-yellow  { background: var(--aksrt-yellow);  color: #422006; }
.aksrt-badge--solid-red     { background: var(--aksrt-red);     color: #fff; }
.aksrt-badge--solid-teal    { background: var(--aksrt-teal);    color: #fff; }
.aksrt-badge--solid-indigo  { background: var(--aksrt-indigo);  color: #fff; }
.aksrt-badge--solid-pink    { background: var(--aksrt-pink);    color: #fff; }

/* Badge sizes */
.aksrt-badge--sm { height: 18px; padding: 0 6px; font-size: 11px; }
.aksrt-badge--lg { height: 28px; padding: 0 12px; font-size: 13px; }

/* ============================================================
 * 5. 背景色工具类 — .aksrt-bg-{color}
 * ============================================================ */
.aksrt-bg-rose   { background-color: var(--aksrt-rose-soft); }
.aksrt-bg-blue   { background-color: var(--aksrt-blue-soft); }
.aksrt-bg-green  { background-color: var(--aksrt-green-soft); }
.aksrt-bg-orange { background-color: var(--aksrt-orange-soft); }
.aksrt-bg-purple { background-color: var(--aksrt-purple-soft); }
.aksrt-bg-cyan   { background-color: var(--aksrt-cyan-soft); }
.aksrt-bg-yellow { background-color: var(--aksrt-yellow-soft); }
.aksrt-bg-red    { background-color: var(--aksrt-red-soft); }
.aksrt-bg-teal   { background-color: var(--aksrt-teal-soft); }
.aksrt-bg-indigo { background-color: var(--aksrt-indigo-soft); }
.aksrt-bg-pink   { background-color: var(--aksrt-pink-soft); }

/* ============================================================
 * 6. 文字色工具类 — .aksrt-text-{color}
 * ============================================================ */
.aksrt-text-rose   { color: var(--aksrt-rose); }
.aksrt-text-blue   { color: var(--aksrt-blue); }
.aksrt-text-green  { color: var(--aksrt-green); }
.aksrt-text-orange { color: var(--aksrt-orange); }
.aksrt-text-purple { color: var(--aksrt-purple); }
.aksrt-text-cyan   { color: var(--aksrt-cyan); }
.aksrt-text-yellow { color: var(--aksrt-yellow); }
.aksrt-text-red    { color: var(--aksrt-red); }
.aksrt-text-teal   { color: var(--aksrt-teal); }
.aksrt-text-indigo { color: var(--aksrt-indigo); }
.aksrt-text-pink   { color: var(--aksrt-pink); }