/**
 * TSD-Web 全局 CSS 变量定义
 * 包含个人中心页面所需的所有 CSS 变量
 */

:root {
  /* ========== 基础颜色 ========== */
  --color-primary: #a855f7;
  --color-primary-light: #c084fc;
  --color-primary-dark: #9333ea;
  
  --color-accent: #67e8f9;
  --color-accent-light: #a5f3fc;
  
  --color-danger: #ef4444;
  --color-danger-light: #f87171;
  --color-danger-dark: #dc2626;
  
  --color-success: #22c55e;
  --color-success-light: #4ade80;
  --color-success-dark: #16a34a;
  
  --color-warning: #eab308;
  --color-warning-light: #facc15;
  --color-warning-dark: #ca8a04;
  
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;

  /* ========== 文本颜色 ========== */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-muted: #475569;
  --text-disabled: #334155;
  --text-inverse: #020205;
  --text-inverse-secondary: #1e293b;

  /* ========== 背景颜色 ========== */
  --bg-page: #020205;
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-tertiary: #1a1a24;
  --bg-elevated: #252530;
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-glass: rgba(17, 17, 24, 0.8);
  --bg-glass-high: rgba(26, 26, 36, 0.95);

  /* ========== 边框颜色 ========== */
  --border-primary: rgba(148, 163, 184, 0.2);
  --border-secondary: rgba(148, 163, 184, 0.1);
  --border-subtle: rgba(148, 163, 184, 0.08);
  --border-visible: rgba(168, 85, 247, 0.3);
  --border-focus: rgba(168, 85, 247, 0.5);

  /* ========== Z-Index 层级 ========== */
  --z-dropdown: 1000;
  --z-modal: 1100;
  --z-popover: 1200;
  --z-tooltip: 1300;
  --z-toast: 1400;
}

/* ========== 动画定义 ========== */
@keyframes fade-in-up-soft {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== 工具类 ========== */
.vi-animate-spin {
  animation: spin 1s linear infinite;
}

.vi-animate-fade-in-up {
  animation: fade-in-up-soft 0.3s ease-out;
}

/* 滚动条样式 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 行数限制 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}