@import "tailwindcss";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

/* ── 设计 token（品牌改版 v2：跟随 logo）────────────────
   霓虹数据流 logo：青 #34E5E0 → 蓝 #3B82F6 → 紫 #A855F7；
   强调色取青蓝段，紫色只在 logo 与品牌渐变里出现；
   中性色向冷蓝偏移，终端窗为深岩蓝底。 */
:root {
  --ground: #f5f7f9;
  --surface: #ffffff;
  --ink: #151c24;
  --ink-2: #526069;
  --ink-3: #8595a0;
  --hairline: #e0e7ec;
  --hairline-strong: #c6d2da;
  --accent: #0284c7;
  --accent-ink: #075985;
  --accent-soft: #e0f2fe;
  --code-bg: #ebf1f5;
  --term-bg: #0e1620;
  --term-ink: #c9e4f5;
  --brand-g1: #0891b2;
  --brand-g2: #2563eb;
  --brand-g3: #9333ea;
}

.dark {
  --ground: #0b1117;
  --surface: #111925;
  --ink: #e6edf3;
  --ink-2: #93a6b4;
  --ink-3: #62737f;
  --hairline: #1f2c38;
  --hairline-strong: #32434f;
  --accent: #38bdf8;
  --accent-ink: #7dd3fc;
  --accent-soft: #0b3049;
  --code-bg: #14202b;
  --term-bg: #0a121b;
  --term-ink: #bfe3f7;
  --brand-g1: #22d3ee;
  --brand-g2: #60a5fa;
  --brand-g3: #c084fc;
}

@theme inline {
  --color-ground: var(--ground);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-ink-3: var(--ink-3);
  --color-hairline: var(--hairline);
  --color-hairline-strong: var(--hairline-strong);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-accent-soft: var(--accent-soft);
  --color-code: var(--code-bg);
  --color-term: var(--term-bg);
  --color-term-ink: var(--term-ink);

  --font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    monospace;
}

html {
  background: var(--ground);
  scroll-behavior: smooth;
}

body {
  @apply bg-ground text-ink font-sans antialiased;
  font-size: 16px;
  line-height: 1.75;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* 全局隐藏滚动条（保留滚动功能） */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 品牌渐变文字（logo 同源：青→蓝→紫），克制使用 */
.text-brand-gradient {
  background: linear-gradient(
    92deg,
    var(--brand-g1),
    var(--brand-g2) 55%,
    var(--brand-g3)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 文章排版 — prose 对齐设计 token */
.prose-site {
  --tw-prose-body: var(--ink-2);
  --tw-prose-headings: var(--ink);
  --tw-prose-links: var(--accent-ink);
  --tw-prose-bold: var(--ink);
  --tw-prose-counters: var(--ink-3);
  --tw-prose-bullets: var(--hairline-strong);
  --tw-prose-hr: var(--hairline);
  --tw-prose-quotes: var(--ink-2);
  --tw-prose-quote-borders: var(--accent);
  --tw-prose-code: var(--accent-ink);
  --tw-prose-pre-bg: var(--term-bg);
  --tw-prose-pre-code: var(--term-ink);
  --tw-prose-th-borders: var(--hairline-strong);
  --tw-prose-td-borders: var(--hairline);
  --tw-prose-captions: var(--ink-3);
}
.prose-site :where(code):not(:where(pre code))::before,
.prose-site :where(code):not(:where(pre code))::after {
  content: none;
}
.prose-site :where(code):not(:where(pre code)) {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 500;
}

/* 终端光标 */
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
.caret-blink {
  animation: caret-blink 1.1s steps(1) infinite;
}

/* 滚动进场（配合 Reveal 组件） */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal-in {
  opacity: 1;
  transform: none;
}

/* 终端事件流：逐行浮现 */
@keyframes term-line-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.term-line {
  opacity: 0;
  animation: term-line-in 0.45s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .caret-blink,
  .term-line {
    animation: none;
  }
  .term-line {
    opacity: 1;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}