/* 共用主題：只放多個前端都會用到的 token 與元件骨架 */

:root {
  /* 基礎色票 */
  --bg: #efe4d3;
  --bg-2: #f8f3e8;
  --bg-deep: #161512;
  --bg-dark: #1a1510;

  /* 文字 */
  --ink: #1e1a16;
  --ink-soft: #5f554c;
  --ink-mute: #9c8876;

  /* 強調色 */
  --accent: #cb5d2d;
  --accent-h: #c43535;
  --accent-soft: #f3d2bf;

  /* 輔助色 */
  --gold: #af8554;
  --gold-l: #e8c47a;
  --bamboo: #3d6b50;
  --white: #fffaf4;

  /* 面板 */
  --surface: rgba(255, 248, 240, 0.82);
  --surface-strong: #fbf4eb;
  --surface-dark: #221f19;
  --panel: rgba(255, 252, 245, 0.9);
  --panel-dk: rgba(28, 23, 16, 0.95);

  /* 線條 */
  --line: rgba(30, 26, 22, 0.1);
  --line-l: rgba(28, 23, 16, 0.06);

  /* 尺寸 */
  --shell: 960px;
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;

  /* 陰影 */
  --shadow: 0 30px 80px rgba(18, 14, 10, 0.12);
  --shadow-lg: 0 20px 60px rgba(20, 15, 8, 0.16);
}

/* 全站共用 reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 共用按鈕骨架 */
.button,
.btn,
.kb-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button:hover,
.btn:hover {
  transform: translateY(-2px);
}

.button {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button.primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--accent) 0%, #e28747 100%);
  box-shadow: 0 18px 36px rgba(203, 93, 45, 0.28);
}

.button.secondary {
  border: 1px solid rgba(30, 26, 22, 0.14);
  background: rgba(255, 250, 244, 0.8);
}

.button.ghost {
  border: 1px solid rgba(30, 26, 22, 0.14);
  background: rgba(255, 250, 244, 0.8);
}

.button.wide {
  width: 100%;
}

/* 共用膠囊骨架 */
.hero-meta span,
.about-tags span,
.day-card .day-tag,
.chip,
.kb-login-btn,
.hero-highlight-card__tag,
.date-tag-option span,
.topbar-notice__tag,
.date-extra-banner__tag,
.card__serial,
.card__access,
.card__tag,
.partial-vip-lock__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* 共用卡片骨架 */
.card,
.panel-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}