@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

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

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 222 30% 15%;
    --card: 0 0% 100%;
    --card-foreground: 222 30% 15%;
    --card-hover: 0 0% 96%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 30% 15%;
    --primary: 217 91% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 217 91% 62%;
    --secondary: 220 15% 94%;
    --secondary-foreground: 222 25% 20%;
    --secondary-hover: 220 15% 88%;
    --muted: 220 15% 94%;
    --muted-foreground: 220 10% 50%;
    --accent: 174 70% 40%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 174 70% 46%;
    --warm: 43 90% 50%;
    --warm-foreground: 0 0% 100%;
    --glow-primary: 217 91% 55%;
    --glow-accent: 174 70% 40%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 15% 88%;
    --input: 220 15% 88%;
    --ring: 217 91% 55%;
    --radius: 0.75rem;
    --gradient-primary: linear-gradient(135deg, hsl(217 91% 55%), hsl(240 60% 65%));
    --gradient-accent: linear-gradient(135deg, hsl(174 70% 40%), hsl(217 91% 55%));
    --gradient-warm: linear-gradient(135deg, hsl(43 90% 50%), hsl(25 95% 50%));
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 98%), hsl(220 15% 94%), hsl(0 0% 98%));
    --gradient-card: linear-gradient(135deg, hsl(0 0% 100%), hsl(220 15% 96%));
    --gradient-card-hover: linear-gradient(135deg, hsl(220 15% 96%), hsl(220 15% 90%));
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 20px -4px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 40px -10px rgb(0 0 0 / 0.12);
    --shadow-glow-primary: 0 0 40px hsl(217 91% 55% / 0.2);
    --shadow-glow-accent: 0 0 30px hsl(174 70% 40% / 0.15);
    --shadow-glow-warm: 0 0 30px hsl(43 90% 50% / 0.15);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --glass-bg: hsl(0 0% 100% / 0.7);
    --glass-border: hsl(220 15% 88% / 0.5);
    --glass-blur: blur(16px);
  }

  .dark {
    --background: 222 30% 6%;
    --foreground: 210 20% 95%;
    --card: 222 25% 10%;
    --card-foreground: 210 20% 95%;
    --card-hover: 222 25% 13%;
    --popover: 222 25% 10%;
    --popover-foreground: 210 20% 95%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 217 91% 68%;
    --secondary: 222 20% 15%;
    --secondary-foreground: 210 20% 90%;
    --secondary-hover: 222 20% 20%;
    --muted: 222 15% 18%;
    --muted-foreground: 215 15% 60%;
    --accent: 174 75% 42%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 174 75% 48%;
    --warm: 43 96% 56%;
    --warm-foreground: 222 30% 6%;
    --glow-primary: 217 91% 60%;
    --glow-accent: 174 75% 42%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 222 20% 16%;
    --input: 222 20% 16%;
    --ring: 217 91% 60%;
    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(240 60% 65%));
    --gradient-accent: linear-gradient(135deg, hsl(174 75% 42%), hsl(217 91% 60%));
    --gradient-warm: linear-gradient(135deg, hsl(43 96% 56%), hsl(25 95% 53%));
    --gradient-hero: linear-gradient(180deg, hsl(222 30% 6%), hsl(222 30% 10%), hsl(222 30% 6%));
    --gradient-card: linear-gradient(135deg, hsl(222 25% 10%), hsl(222 25% 14%));
    --gradient-card-hover: linear-gradient(135deg, hsl(222 25% 14%), hsl(222 25% 18%));
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 20px -4px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 40px -10px rgb(0 0 0 / 0.6);
    --shadow-glow-primary: 0 0 40px hsl(217 91% 60% / 0.15);
    --shadow-glow-accent: 0 0 30px hsl(174 75% 42% / 0.12);
    --shadow-glow-warm: 0 0 30px hsl(43 96% 56% / 0.12);
    --glass-bg: hsl(222 25% 10% / 0.6);
    --glass-border: hsl(222 20% 20% / 0.5);
  }
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground font-sans antialiased transition-colors duration-300;
  }
  .dark body {
    background-image:
      radial-gradient(ellipse 80% 60% at 50% -10%, hsl(var(--glow-primary) / 0.06), transparent),
      radial-gradient(ellipse 60% 50% at 90% 80%, hsl(var(--glow-accent) / 0.04), transparent);
    background-attachment: scroll;
  }
  @media (min-width: 768px) {
    .dark body {
      background-attachment: fixed;
    }
  }
  ::selection { @apply bg-primary/30 text-foreground; }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: hsl(var(--background)); }
  ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
}

@layer components {
  .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); }
  .text-gradient-primary { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: hsl(var(--primary)); } @supports (-webkit-background-clip: text) or (background-clip: text) { .text-gradient-primary { color: transparent; } }
  .text-gradient-accent { background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: hsl(var(--accent)); } @supports (-webkit-background-clip: text) or (background-clip: text) { .text-gradient-accent { color: transparent; } }
  .text-gradient-warm { background: var(--gradient-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: hsl(var(--warm)); } @supports (-webkit-background-clip: text) or (background-clip: text) { .text-gradient-warm { color: transparent; } }
  .glow-primary { box-shadow: var(--shadow-glow-primary); }
  .glow-accent { box-shadow: var(--shadow-glow-accent); }
  .hero-grid {
    background-image:
      linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 70%);
  }
  .section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
  }
}

@layer utilities {
  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }
  .animate-delay-400 { animation-delay: 0.4s; }
  .animate-delay-500 { animation-delay: 0.5s; }
  .animate-delay-700 { animation-delay: 0.7s; }
  .animate-delay-1000 { animation-delay: 1s; }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  html {
    scroll-behavior: smooth;
  }
  .animate-fill-forwards { animation-fill-mode: forwards; }
  .animate-fill-backwards { animation-fill-mode: backwards; }
  .animate-fill-both { animation-fill-mode: both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

@layer components {
  .btn-press {
    transition: transform 0.1s ease, box-shadow 0.15s ease;
  }
  .btn-press:active:not(:disabled) {
    transform: scale(0.96);
  }
  .card-hover-lift {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
  }
  .card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.12);
  }
  .interactive-focus-ring {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .interactive-focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.4);
    border-color: hsl(var(--ring));
  }

  /* ── 博客内容样式 ─────────────────────────────────── */
  .blog-content h1 { @apply text-2xl sm:text-3xl font-extrabold mt-10 mb-4; }
  .blog-content h2 { @apply text-xl sm:text-2xl font-bold mt-8 mb-3 text-primary; }
  .blog-content h3 { @apply text-lg sm:text-xl font-semibold mt-6 mb-2; }
  .blog-content h4 { @apply text-base font-semibold mt-4 mb-2; }
  .blog-content p { @apply mb-4 leading-relaxed; }
  .blog-content ul { @apply list-disc pl-6 mb-4; }
  .blog-content ol { @apply list-decimal pl-6 mb-4; }
  .blog-content li { @apply mb-1.5 leading-relaxed; }
  .blog-content li > ul,
  .blog-content li > ol { @apply mt-1.5 mb-0; }
  .blog-content blockquote {
    @apply border-l-4 border-primary/30 pl-4 py-1 my-4 text-muted-foreground italic;
  }
  .blog-content hr { @apply my-8 border-border; }
  .blog-content a { @apply text-primary underline hover:no-underline; }
  .blog-content strong { @apply text-foreground font-semibold; }
  .blog-content em { @apply italic; }
  /* 行内代码 */
  .blog-content :not(pre) > code {
    @apply bg-secondary px-1.5 py-0.5 rounded text-sm font-mono text-accent;
  }
  /* 围栏代码块 */
  .blog-content pre {
    @apply mb-6 rounded-xl overflow-x-auto;
    background: hsl(var(--muted));
  }
  .blog-content pre code {
    @apply bg-transparent p-4 block text-sm font-mono leading-relaxed;
  }
  /* 表格 */
  .blog-content table {
    @apply w-full mb-6 border-collapse overflow-x-auto;
    display: block;
  }
  @media (min-width: 640px) {
    .blog-content table { display: table; }
  }
  .blog-content thead { @apply border-b-2 border-border; }
  .blog-content th {
    @apply border border-border px-3 sm:px-4 py-2 bg-secondary/50 text-left text-sm font-semibold;
  }
  .blog-content td {
    @apply border border-border px-3 sm:px-4 py-2 text-sm;
  }
  .blog-content tr:nth-child(even) td { @apply bg-secondary/20; }
  /* 图片 */
  .blog-content img { @apply rounded-xl max-w-full my-6; }
  /* 数学公式 */
  .blog-content .math { @apply my-4; }
  .blog-content .math-display { @apply overflow-x-auto; }
  /* 目录 (TOC) */
  .blog-content .toc {
    @apply bg-card border border-border rounded-xl p-4 mb-6;
  }
  .blog-content .toc ul { @apply list-disc pl-5; }
  .blog-content .toc li { @apply mb-1; }
  .blog-content .toc a { @apply no-underline; }
}
