@import "tailwindcss";

/* ========================================
   FateOS - 赛博禅意主题 (Cyberpunk Zen)
   ======================================== */

:root {
  /* 背景层 */
  --bg-void: #0a0a0f;
  --bg-card: #12121a;
  --bg-elevated: #1a1a28;
  
  /* 霓虹强调色（场景主题色） */
  --neon-gold: #fbbf24;
  --neon-rose: #fb7185;
  --neon-cyan: #22d3ee;
  --neon-violet: #a78bfa;
  
  /* 通用色 */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  
  /* 光晕效果 */
  --glow-gold: rgba(251, 191, 36, 0.4);
  --glow-rose: rgba(251, 113, 133, 0.4);
  --glow-cyan: rgba(34, 211, 238, 0.4);
  --glow-violet: rgba(167, 139, 250, 0.4);
}

@theme inline {
  /* 背景色 */
  --color-bg-void: var(--bg-void);
  --color-bg-card: var(--bg-card);
  --color-bg-elevated: var(--bg-elevated);
  
  /* 霓虹色 */
  --color-neon-gold: var(--neon-gold);
  --color-neon-rose: var(--neon-rose);
  --color-neon-cyan: var(--neon-cyan);
  --color-neon-violet: var(--neon-violet);
  
  /* 文字色 */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  
  /* 字体 */
  --font-sans: "Inter", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* 全局样式 */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* 选中文本样式 */
::selection {
  background: var(--neon-violet);
  color: var(--bg-void);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-card);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* 动画关键帧 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 工具类 */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* 霓虹光晕效果 */
.glow-gold {
  box-shadow: 0 0 20px var(--glow-gold), 0 0 40px var(--glow-gold);
}

.glow-rose {
  box-shadow: 0 0 20px var(--glow-rose), 0 0 40px var(--glow-rose);
}

.glow-cyan {
  box-shadow: 0 0 20px var(--glow-cyan), 0 0 40px var(--glow-cyan);
}

.glow-violet {
  box-shadow: 0 0 20px var(--glow-violet), 0 0 40px var(--glow-violet);
}

/* 渐变边框效果 */
.border-gradient-gold {
  border: 1px solid transparent;
  background: 
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--neon-gold), transparent 60%) border-box;
}

.border-gradient-rose {
  border: 1px solid transparent;
  background: 
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--neon-rose), transparent 60%) border-box;
}

.border-gradient-cyan {
  border: 1px solid transparent;
  background: 
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--neon-cyan), transparent 60%) border-box;
}

.border-gradient-violet {
  border: 1px solid transparent;
  background: 
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--neon-violet), transparent 60%) border-box;
}

/* 玻璃拟态效果 */
.glass {
  background: rgba(18, 18, 26, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}