/* 导入设计系统 CSS 变量 */
@import '../styles/design-system.css';

/* 隐藏滚动条 */
.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 向后兼容旧的 CSS 变量 */
:root {
  --background: var(--bg-base);
  --foreground: var(--text-primary);
}

[data-theme="dark"] {
  --background: var(--bg-base);
  --foreground: var(--text-primary);
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  overflow-x: hidden;
}

/* 文本选中样式 - Light Mode (毛玻璃效果) */
::selection {
  background-color: rgba(156, 163, 175, 0.35);
}

::-moz-selection {
  background-color: rgba(156, 163, 175, 0.35);
}

/* 文本选中样式 - Dark Mode (毛玻璃效果) */
[data-theme="dark"] ::selection {
  background-color: rgba(156, 163, 175, 0.4);
}

[data-theme="dark"] ::-moz-selection {
  background-color: rgba(156, 163, 175, 0.4);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* HeroUI Navbar: prevent border-color from falling back to currentColor
   when --nextui-divider CSS variable is not resolved */
nav.z-40 {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Font family utilities with Chinese support */
.font-inter {
  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.font-domine {
  font-family: var(--font-noto-serif-sc), var(--font-domine), Georgia, "Noto Serif", serif;
}

.font-jetbrains {
  font-family: var(--font-jetbrains), "Courier New", monospace;
}

/* Calculator card wiggle animation */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  35% { transform: rotate(4.5deg); }
  55% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2deg); }
  90% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

.calculator-card-container {
  cursor: pointer;
}

.calculator-card-container:hover {
  animation: wiggle 2.5s ease-in-out infinite;
}

/* TrustedBy section mobile marquee */
@keyframes trusted-marquee {
  from { transform: translateX(0%); }
  to   { transform: translateX(-50%); }
}

/* Arrow bounce animation - left and right */
@keyframes arrowBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.group:hover .arrow-icon {
  animation: arrowBounce 1.5s ease-in-out infinite;
}