/* =========================================================
   Soloco — design tokens v2
   Single source of truth for colors / typography / motion
   Aligned with soloco V2 (ui/src/index.css)
   ========================================================= */

:root {
  color-scheme: light;
  /* ---------- color — cool indigo, mirrors ui/src/index.css :root ---------- */
  --background: oklch(0.975 0.004 250);
  --background-2: oklch(0.97 0.005 250);
  --foreground: oklch(0.22 0.02 265);
  --foreground-subtle: oklch(0.34 0.02 265);

  --card: oklch(0.995 0.003 250);
  --card-hover: oklch(0.98 0.005 250);
  --elevated: oklch(1 0 0);

  --primary: oklch(0.55 0.17 262);
  --primary-2: oklch(0.6 0.17 262);
  --primary-foreground: oklch(0.985 0.004 250);
  --primary-soft: oklch(0.93 0.04 262);
  --primary-deep: oklch(0.38 0.15 262);

  --secondary: oklch(0.95 0.007 250);
  --muted: oklch(0.955 0.006 250);
  --muted-foreground: oklch(0.5 0.015 260);
  --accent: oklch(0.94 0.01 255);
  --accent-strong: oklch(0.9 0.015 255);

  --succeed: oklch(0.65 0.12 150);
  --succeed-soft: oklch(0.93 0.04 150);
  --awaits: oklch(0.72 0.13 80);
  --awaits-soft: oklch(0.95 0.04 80);
  --destructive: oklch(0.55 0.21 25);
  --destructive-soft: oklch(0.94 0.04 25);
  --info: oklch(0.6 0.1 230);
  --info-soft: oklch(0.94 0.03 230);

  --border: oklch(0.905 0.007 255);
  --border-strong: oklch(0.84 0.01 255);
  --border-subtle: oklch(0.94 0.005 255);
  --ring: oklch(0.55 0.17 262 / 0.35);

  --beam-intensity: 1;
  --duration-beam: 3.2s;

  /* ---------- gradients — house signature ---------- */
  --grad-aurora: radial-gradient(60% 80% at 50% 0%, oklch(0.55 0.17 262 / 0.16), transparent 60%),
                 radial-gradient(40% 60% at 90% 30%, oklch(0.72 0.13 80 / 0.08), transparent 60%);
  --grad-ink: linear-gradient(180deg, var(--foreground), color-mix(in oklch, var(--foreground), var(--primary) 18%));
  --grad-primary-soft: linear-gradient(135deg, var(--primary-soft), color-mix(in oklch, var(--primary-soft), var(--awaits-soft) 30%));
  --grad-page: radial-gradient(80% 60% at 50% -10%, oklch(0.55 0.17 262 / 0.08), transparent 70%),
               var(--background);
}

/* ---------- dark — warm terracotta, mirrors ui/src/index.css .dark ---------- */
.dark {
  color-scheme: dark;

  --background: oklch(0.16 0.008 60);
  --background-2: oklch(0.18 0.008 60);
  --foreground: oklch(0.96 0.005 80);
  --foreground-subtle: oklch(0.82 0.008 70);

  --card: oklch(0.21 0.008 60);
  --card-hover: oklch(0.24 0.008 60);
  --elevated: oklch(0.23 0.008 60);

  --primary: oklch(0.72 0.12 38);
  --primary-2: oklch(0.78 0.13 42);
  --primary-foreground: oklch(0.16 0.008 60);
  --primary-soft: oklch(0.28 0.04 38);
  --primary-deep: oklch(0.88 0.1 42);

  --secondary: oklch(0.24 0.008 60);
  --muted: oklch(0.22 0.006 60);
  --muted-foreground: oklch(0.68 0.01 60);
  --accent: oklch(0.26 0.01 60);
  --accent-strong: oklch(0.32 0.012 60);

  --succeed: oklch(0.72 0.12 150);
  --succeed-soft: oklch(0.26 0.05 150);
  --awaits: oklch(0.78 0.12 80);
  --awaits-soft: oklch(0.28 0.06 80);
  --destructive: oklch(0.65 0.2 25);
  --destructive-soft: oklch(0.3 0.08 25);
  --info: oklch(0.7 0.1 230);
  --info-soft: oklch(0.26 0.06 230);

  --border: oklch(0.28 0.008 60);
  --border-strong: oklch(0.35 0.01 60);
  --border-subtle: oklch(0.24 0.006 60);
  --ring: oklch(0.72 0.12 38 / 0.5);

  --grad-aurora: radial-gradient(60% 80% at 50% 0%, oklch(0.72 0.12 38 / 0.22), transparent 60%),
                 radial-gradient(40% 60% at 90% 30%, oklch(0.78 0.12 80 / 0.1), transparent 60%);
  --grad-page: radial-gradient(80% 60% at 50% -10%, oklch(0.72 0.12 38 / 0.12), transparent 70%),
               var(--background);

  --shadow-xs: 0 1px 2px -1px oklch(0 0 0 / 0.3);
  --shadow-sm: 0 2px 4px -1px oklch(0 0 0 / 0.35);
  --shadow-md: 0 6px 16px -4px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 36px -12px oklch(0 0 0 / 0.5);
  --shadow-xl: 0 32px 64px -20px oklch(0 0 0 / 0.6);
  --shadow-inset: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
  --shadow-glow: 0 0 0 1px var(--primary), 0 0 28px -4px oklch(0.72 0.12 38 / 0.55);
}

:root {

  /* ---------- radius ---------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.4375rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 999px;

  /* ---------- elevation ---------- */
  --shadow-xs: 0 1px 2px -1px oklch(0.22 0.03 265 / 0.06);
  --shadow-sm: 0 2px 4px -1px oklch(0.22 0.03 265 / 0.07);
  --shadow-md: 0 6px 16px -4px oklch(0.22 0.03 265 / 0.09);
  --shadow-lg: 0 18px 36px -12px oklch(0.22 0.03 265 / 0.14);
  --shadow-xl: 0 32px 64px -20px oklch(0.22 0.03 265 / 0.18);
  --shadow-inset: inset 0 1px 0 0 oklch(1 0 0 / 0.6);
  --shadow-glow: 0 0 0 1px var(--primary), 0 0 24px -4px oklch(0.55 0.17 262 / 0.4);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---------- typography ---------- */
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Source Serif 4", "Noto Serif SC", ui-serif, Georgia, serif;

  --fs-caption: 0.6875rem;   /* 11 */
  --fs-xs: 0.75rem;          /* 12 */
  --fs-sm: 0.8125rem;        /* 13 */
  --fs-body: 0.9375rem;      /* 15 */
  --fs-body-lg: 1.0625rem;   /* 17 */
  --fs-h4: 1.125rem;         /* 18 */
  --fs-h3: 1.375rem;         /* 22 */
  --fs-h2: 1.875rem;         /* 30 */
  --fs-h1: 2.625rem;         /* 42 */
  --fs-display: 3.75rem;     /* 60 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;
  --lh-zh: 1.7;

  --tracking-tight: -0.028em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.06em;
  --tracking-mono: 0.04em;

  /* ---------- motion ─────────────────────────────────────────────
   * 跟 soloco V2 (ui/src/index.css) 的 Motion System Overview token 对齐。
   *   - duration 6 档单调递增；transform / opacity 优先；layout 属性禁用
   *   - easing 4 种；out-soft 是默认，其它各自专用：
   *     · spring-soft: toggle / tab thumb / chip pop（~6% overshoot）
   *     · in-out: theme swap / 主题色混合（对称）
   *     · in-cubic: dialog dismiss / toast leave（仅退场）
   * ---------- */
  --ease-out-soft:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-cubic:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  /* 旧别名保留，避免破坏既有 css 引用 */
  --ease-in-out-smooth: var(--ease-in-out);
  --ease-spring:        var(--ease-spring-soft);

  --duration-instant:   80ms;   /* :active press / pointer-down */
  --duration-fast:     140ms;   /* hover / color shift / focus ring */
  --duration-base:     240ms;   /* tab thumb / toggle / dropdown / card lift */
  --duration-slow:     420ms;   /* page enter / dialog / sheet / toast in / skeleton reveal */
  --duration-very-slow: 800ms;  /* number counter / cost ticker */
  --duration-page:     720ms;   /* page transition (legacy) */
  --duration-beam:     3.2s;    /* continuous loops only */

  /* ---------- layout ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-prose: 44rem;
  --gutter: 2rem;
  --section-y: clamp(4rem, 8vw, 7rem);
}

/* ---------- global reset + base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "cv01", "palt", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 主题切换平滑（dark ↔ light），跟 V2 ui/src/index.css 对齐 */
  transition:
    background-color var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out);
}
:lang(zh), :lang(zh-CN) { line-height: var(--lh-zh); }
h1, h2, h3, h4, h5 { letter-spacing: var(--tracking-snug); text-wrap: balance; font-weight: 500; }
h1 { letter-spacing: var(--tracking-tight); }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: color-mix(in oklch, var(--primary), transparent 75%); color: var(--foreground); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---------- primitives shared across landing + subpages ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-prose { max-width: var(--container-prose); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted-foreground);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- dot — mirrors product .dot ---------- */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-foreground);
  vertical-align: middle;
  flex-shrink: 0;
}
.dot.running, .dot-primary {
  background: var(--primary);
  animation: dot-pulse 2s var(--ease-out-soft) infinite;
}
.dot.succeeded, .dot-succeed { background: var(--succeed); }
.dot.paused, .dot-awaits { background: var(--awaits); }
.dot.error, .dot-destructive { background: var(--destructive); }
.dot.idle { background: var(--muted-foreground); opacity: 0.6; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary), transparent 100%); }
  50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary), transparent 85%); }
}

/* ---------- chip — mirrors product .chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip.running { background: var(--primary-soft); color: color-mix(in oklch, var(--primary), black 10%); border-color: transparent; }
.dark .chip.running { color: oklch(0.9 0.06 38); }
.chip.idle, .chip.paused, .chip.completed { background: var(--muted); }
.chip.error { background: var(--muted); color: var(--destructive); }
.chip.succeeded { background: var(--succeed-soft); color: color-mix(in oklch, var(--succeed), black 10%); border-color: transparent; }
.dark .chip.succeeded { color: oklch(0.9 0.06 150); }
.chip.awaits { background: var(--awaits-soft); color: color-mix(in oklch, var(--awaits), black 10%); border-color: transparent; }
.dark .chip.awaits { color: oklch(0.92 0.07 80); }

/* ---------- heartbeat 3-dot — mirrors product .heartbeat ---------- */
.heartbeat { display: inline-flex; gap: 3px; align-items: center; }
.heartbeat span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--primary);
  animation: heartbeat 1.6s var(--ease-out-soft) infinite;
}
.heartbeat span:nth-child(2) { animation-delay: 0.15s; }
.heartbeat span:nth-child(3) { animation-delay: 0.3s; }
@keyframes heartbeat {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------- beam (border-beam) — SCARCE; only on "running" nodes ---------- */
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    transparent 300deg,
    oklch(0.62 0.13 38) 340deg,
    oklch(0.75 0.15 45) 355deg,
    oklch(0.85 0.12 60) 360deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: beam-spin var(--duration-beam) linear infinite;
  pointer-events: none;
  opacity: var(--beam-intensity, 1);
  z-index: 1;
}
.beam > * { position: relative; z-index: 2; }
@property --beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

.beam-line { position: relative; }
.beam-line::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent var(--beam-line-pos, 0%),
    oklch(0.85 0.12 55) calc(var(--beam-line-pos, 0%) + 5%),
    oklch(0.62 0.13 38) calc(var(--beam-line-pos, 0%) + 15%),
    transparent calc(var(--beam-line-pos, 0%) + 25%),
    transparent 100%
  );
  animation: beam-line-slide 2.8s var(--ease-out-soft) infinite;
  border-radius: inherit;
  opacity: var(--beam-intensity, 1);
}
@property --beam-line-pos { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@keyframes beam-line-slide { 0% { --beam-line-pos: -25%; } 100% { --beam-line-pos: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .beam::before, .beam-line::after { animation: none !important; }
  .beam::before { background: linear-gradient(var(--primary), var(--primary)); opacity: 0.4; }
  .heartbeat span, .dot.running { animation: none !important; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out-soft),
              transform var(--duration-slow) var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ═══════════════════════════════════════════════════════════════════
 * Motion System · 共享 keyframes + utility class
 * 跟 V2 ui/src/index.css 同源（来自 Claude Design 的 Motion System Overview）
 * 命名 soloco- 前缀避免和站点其它 css 冲突
 * ═══════════════════════════════════════════════════════════════════ */

/* skeleton 流光占位（1.4s 线性循环） */
@keyframes soloco-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* skeleton → loaded 的 blur 揭幕 */
@keyframes soloco-skel-reveal {
  from { opacity: 0; transform: translateY(2px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* status pulse — agent / live indicator 心跳脉冲（1.8s 接近人体心跳） */
@keyframes soloco-status-pulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* streaming text caret — 全网站唯一允许"持续闪烁"的元素 */
@keyframes soloco-caret-blink {
  50% { opacity: 0; }
}

/* toast 入场 / 出场 */
@keyframes soloco-toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes soloco-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* 通用 enter — empty state / page enter / list item drop in */
@keyframes soloco-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 表单提交失败 X 轴抖动（4 周期 ±4px） */
@keyframes soloco-error-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* ─── utility classes ─────────────────────── */

.soloco-lift {
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft),
    border-color var(--duration-base) var(--ease-out-soft);
}
.soloco-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px oklch(0 0 0 / 0.18);
}
.dark .soloco-lift:hover { box-shadow: 0 12px 30px -10px oklch(0 0 0 / 0.5); }

.soloco-press:active {
  transform: scale(0.97);
  transition-duration: var(--duration-instant);
}

.soloco-fade-in-up {
  animation: soloco-fade-in-up var(--duration-slow) var(--ease-out-soft);
}

.soloco-skeleton {
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    color-mix(in oklch, var(--muted-foreground) 18%, transparent) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: soloco-skel-shimmer 1.4s linear infinite;
  border-radius: 6px;
}

.soloco-status-pulse-ring { position: relative; }
.soloco-status-pulse-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: soloco-status-pulse 1.8s var(--ease-out-soft) infinite;
}

.soloco-caret {
  display: inline-block;
  width: 0.5em; height: 1em;
  vertical-align: text-bottom;
  margin-left: 1px;
  background: currentColor;
  animation: soloco-caret-blink 1.05s steps(2, jump-none) infinite;
}

.soloco-error-shake {
  animation: soloco-error-shake 320ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .soloco-lift,
  .soloco-press,
  .soloco-fade-in-up,
  .soloco-skeleton,
  .soloco-status-pulse-ring::before,
  .soloco-caret,
  .soloco-error-shake {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@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;
  }
  .reveal { opacity: 1; transform: none; }
}