/* ==========================================================================
   Vortelio — 奶油焦糖首页点缀（仅 index.html 挂载）
   焦糖 / 太妃 / 可可暖色糖霜；结构变量沿用 Cream Caramel token 体系
   挂载顺序：caramel/tokens.css → css-2.css → caramel-home.css（本文件最后，覆盖生效）
   ========================================================================== */

/* ---------- 首页 hero 焦糖糖霜点缀 ---------- */
/* hero 在奶油底上叠焦糖/太妃色斑，柔和低饱和，不做纯白、不做青瓷蓝、不做马卡龙粉 */
.od-hero,
.od-home-hero {
  background:
    radial-gradient(60rem 24rem at 12% -10%, color-mix(in oklab, var(--cream-300) 80%, transparent), transparent 60%),
    radial-gradient(48rem 20rem at 88% 0%,  color-mix(in oklab, var(--caramel-500) 32%, transparent), transparent 60%),
    radial-gradient(40rem 18rem at 50% 110%, color-mix(in oklab, var(--toffee-700) 24%, transparent), transparent 55%),
    var(--bg-page);
}
[data-theme="dark"] .od-hero,
[data-theme="dark"] .od-home-hero {
  background:
    radial-gradient(60rem 24rem at 12% -10%, var(--bg-subtle), transparent 60%),
    radial-gradient(48rem 20rem at 88% 0%,  color-mix(in oklab, var(--caramel-500) 16%, transparent), transparent 60%),
    radial-gradient(40rem 18rem at 50% 110%, var(--bg-accent-soft), transparent 55%),
    var(--bg-page);
}

.od-home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px 48px;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto;
}
.od-home-hero-copy { flex: 1 1 420px; min-width: 0; max-width: 620px; }
.od-home-hero-copy p { margin: 0; }
.od-home-hero .od-home-search { margin: 22px 0 0; }
.od-home-cast {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
.od-home-mascot {
  width: min(220px, 30vw);
  height: auto;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
}
.od-home-girl {
  width: min(200px, 28vw);
  height: auto;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
}
.od-cat-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: center;
}
.od-cat-head { align-items: center; }
.od-cat-girl {
  height: 96px;
  width: auto;
  margin-left: auto;
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 720px) {
  .od-home-hero { flex-direction: column-reverse; text-align: center; }
  .od-home-hero-copy p { margin: 0 auto; }
  .od-home-hero .od-home-search { margin-left: auto; margin-right: auto; }
  .od-home-cast { justify-content: center; }
  .od-home-mascot { width: min(140px, 36vw); }
  .od-home-girl { width: min(120px, 32vw); }
  .od-cat-girl { height: 72px; }
}

/* ---------- 工具卡片：奶油卡 + 焦糖描边，hover 抬升 ---------- */
.od-card,
.tool-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.od-card:hover,
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* ---------- 顶栏：奶油半透明 ---------- */
.od-topbar {
  background: color-mix(in oklab, var(--bg-surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .od-topbar {
  background: color-mix(in oklab, var(--bg-surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
}