@import "@fontsource/geist/400.css";
@import "@fontsource/geist/500.css";
@import "@fontsource/geist/600.css";
@import "@fontsource/geist/700.css";
@import "@fontsource/geist/800.css";
@import "@fontsource/fira-code/400.css";
@import "@fontsource/fira-code/500.css";

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

/* Design tokens — Kimi brand: neutral gray + blue accent (matches the app UI).
   Light is the default; dark follows prefers-color-scheme. */
@layer base {
  :root {
    --background: 240 11% 97%;
    --foreground: 240 9% 11%;
    --card: 0 0% 100%;
    --card-foreground: 240 9% 11%;
    --muted: 240 6% 94%;
    --muted-foreground: 220 9% 46%;
    --accent: 240 6% 94%;
    --accent-foreground: 240 9% 11%;
    --border: 240 6% 90%;
    --primary: 221 74% 50%;
    --primary-foreground: 0 0% 100%;
    --ring: 221 74% 50%;
    /* 克制分层阴影（色相一致的 tinted shadow，非荧光发光） */
    --shadow-soft: 0 1px 2px hsl(240 9% 11% / 0.05),
      0 8px 24px hsl(240 9% 11% / 0.06);
    --shadow-lift: 0 1px 2px hsl(240 9% 11% / 0.05),
      0 12px 36px hsl(240 9% 11% / 0.1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: 222 47% 6%;
      --foreground: 220 20% 92%;
      --card: 222 32% 10%;
      --card-foreground: 220 20% 92%;
      --muted: 222 25% 14%;
      --muted-foreground: 220 12% 62%;
      --accent: 222 25% 14%;
      --accent-foreground: 220 20% 92%;
      --border: 222 22% 17%;
      --primary: 216 68% 62%;
      --primary-foreground: 0 0% 100%;
      --ring: 216 68% 62%;
      --shadow-soft: 0 1px 2px hsl(222 47% 2% / 0.5),
        0 8px 24px hsl(222 47% 2% / 0.45);
      --shadow-lift: 0 1px 2px hsl(222 47% 2% / 0.5),
        0 12px 36px hsl(222 47% 2% / 0.55);
    }
  }

  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
  /* 选中色与键盘焦点（无障碍） */
  ::selection {
    background: hsl(var(--primary) / 0.16);
  }
  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
  /* 展示标题：更紧字距 + 防孤词 */
  h1,
  h2 {
    text-wrap: balance;
    letter-spacing: -0.02em;
  }
}

@layer components {
  .container-page {
    @apply mx-auto w-full max-w-7xl px-5 md:px-8;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200;
  }
  .btn-primary {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 hover:-translate-y-px active:translate-y-0 active:scale-[0.98];
    box-shadow: 0 1px 2px hsl(221 45% 25% / 0.25);
  }
  .btn-ghost {
    @apply btn border border-border bg-card/60 text-foreground hover:border-foreground/25 hover:bg-accent active:scale-[0.98];
  }
  .card {
    @apply rounded-2xl border border-border bg-card p-6;
    box-shadow: var(--shadow-soft);
    transition:
      box-shadow 0.3s ease,
      transform 0.3s ease,
      border-color 0.3s ease;
  }
  .card:hover {
    box-shadow: var(--shadow-lift);
  }
  /* 截图容器：限定最大宽高，避免撑满页面 */
  .screenshot {
    @apply overflow-hidden rounded-xl border border-border bg-muted;
    box-shadow: var(--shadow-lift);
  }
  .screenshot > img {
    @apply block h-auto w-full;
  }
  /* 图标容器：中性底、统一描边宽度（Phosphor duotone） */
  .icon-chip {
    @apply flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-muted text-foreground;
  }
}