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

/* ========================================
   CSS 变量主题系统
   ======================================== */
:root {
  /* 主色调 */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  /* 背景色与前景色 */
  --color-background: #ffffff;
  --color-foreground: #1e293b;
  --color-muted: #f1f5f9;
  --color-accent: #8b5cf6;
  --color-border: #e2e8f0;
  --color-code-bg: #1e293b;

  /* 字体 */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;
  --font-serif: 'Noto Serif SC', Georgia, 'Times New Roman', serif;

  /* 间距 */
  --header-height: 4rem;
  --content-max-width: 80rem;
}

/* 暗黑模式 */
.dark {
  --color-background: #0f172a;
  --color-foreground: #f1f5f9;
  --color-muted: #1e293b;
  --color-accent: #a78bfa;
  --color-border: #334155;
  --color-code-bg: #0f172a;
}

/* ========================================
   基础样式
   ======================================== */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-sans);
  }

  /* 选中文本样式 */
  ::selection {
    @apply bg-primary-200 text-primary-900;
  }

  .dark ::selection {
    @apply bg-primary-700 text-primary-100;
  }

  /* 链接基础样式 */
  a {
    @apply transition-colors duration-200;
  }

  /* 代码块样式 */
  code {
    @apply font-mono text-sm;
  }

  pre {
    @apply overflow-x-auto rounded-lg p-4;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-primary-400 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-primary-500;
  }
}

/* ========================================
   组件样式
   ======================================== */
@layer components {
  /* 文章内容容器 */
  .prose-container {
    @apply max-w-none prose prose-lg dark:prose-invert;
  }

  /* 卡片样式 */
  .card {
    @apply bg-background border border-border rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-200;
  }

  /* 按钮样式 */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-muted text-foreground hover:bg-primary-100 dark:hover:bg-primary-900 focus:ring-primary-500;
  }

  .btn-ghost {
    @apply btn bg-transparent hover:bg-muted focus:ring-primary-500;
  }

  /* 输入框样式 */
  .input {
    @apply w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
  }

  /* 文章元信息样式 */
  .article-meta {
    @apply flex items-center gap-4 text-sm;
    color: rgba(30, 41, 59, 0.6);
  }

  .dark .article-meta {
    color: rgba(241, 245, 249, 0.6);
  }

  /* 标签样式 */
  .tag {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300;
  }

  /* 渐变文本 */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-purple-500;
  }
}

/* ========================================
   工具类
   ======================================== */
@layer utilities {
  /* 文章内容最大宽度 */
  .content-width {
    max-width: var(--content-max-width);
    @apply mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* 隐藏滚动条但保持滚动功能 */
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  /* 玻璃效果 */
  .glass {
    @apply backdrop-blur-md;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .dark .glass {
    background-color: rgba(15, 23, 42, 0.8);
  }

  /* 渐变边框 */
  .gradient-border {
    position: relative;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary-500), var(--color-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}