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

html,
body,
#root {
  height: 100%;
  margin: 0;
}

/* 全局隐藏滚动条（保留滚动功能）——官网与控制台所有页面、以及页内任意滚动区
   （侧栏、表格 overflow-auto、Modal 等）统一生效。 */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 旧 Edge/IE */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome / Safari */
}

/* ══ 官网落地页设计 token（跟随 logo：青→蓝→紫）══
   仅 src/site/ 的落地页组件用这些；admin 控制台用默认 gray/violet 调色板，互不影响。
   bg-ground/text-ink 等只作用在 SiteLayout 的容器上（见 site-layout.tsx），不改 body。 */
: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;
}

/* v3 对 var() 色不支持 /opacity 修饰，用 color-mix 还原 bg-ground/85（sticky 头透底 + 模糊）。 */
.bg-ground-85 {
  background-color: color-mix(in srgb, var(--ground) 85%, transparent);
}

/* 品牌渐变文字（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;
}

/* 终端光标 */
@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;
  }
}