/* ==========================================================================
   hotelwallpanel.com — UI Design Tokens (Instruction Card V2.0 · Section 5)
   Verbatim from the card. Loaded on every page that receives a V2.0 slot.
   ========================================================================== */
:root {
  /* 品牌核心主色系 */
  --color-primary-dark: #141518;       /* 高级深炭黑，用于大底色、Footer 与重点文案 */
  --color-secondary-surface: #1F2228;  /* 深色卡片与输入框底色 */
  --color-brand-gold: #8C6A3F;         /* 香槟哑光金，核心 CTA 按钮、Hover 状态与关键高亮 */
  --color-brand-gold-hover: #B2956E;   /* 按钮悬停过渡色 */

  /* 中性背景色 */
  --color-bg-page: #F8F9FA;            /* 浅冷灰主页面背景 */
  --color-card-white: #FFFFFF;         /* 纯白卡片底色 */
  --color-border-light: #E5E7EB;       /* 浅色边框与分割线 */
  --color-border-dark: #374151;        /* 深色边框与输入框边线 */

  /* 文字颜色 */
  --color-text-heading: #111827;       /* H1/H2 标题纯黑墨色 */
  --color-text-body: #4B5563;          /* 正文阅读灰 */
  --color-text-muted: #9CA3AF;         /* 辅助与时间参数灰 */
  --color-text-inverse: #FFFFFF;       /* 深色背景下的纯白文字 */

  /* 栅格与间距系统 */
  --container-max-width: 1440px;
  --container-padding-desktop: 48px;
  --container-padding-mobile: 20px;
  --border-radius-card: 8px;
  --box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --box-shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* --- derived helpers, still strictly from the token set ------------------ */
:root {
  --vpad: var(--container-padding-desktop);
  --vpad-m: var(--container-padding-mobile);
}

@media (max-width: 860px) {
  :root { --vpad: var(--container-padding-mobile); }
}

/* 1440px container that collapses the 48px/20px padding on mobile */
.vcontainer {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--vpad);
}