/* ==========================================================================
   skins.css · 皮肤定义（配色方案）
   --------------------------------------------------------------------------
   机制：皮肤通过 <html data-skin="..."> 生效，切换只改变量，不改任何组件代码。
   - 默认皮肤（品牌红黑）定义在 tokens.css 的 :root 中，未设置 data-skin 时生效
   - 本文件只定义「替代皮肤」，避免与默认皮肤产生重复维护
   - 新增一套皮肤 = 复制一个 [data-skin="xxx"] 块并改颜色，约 30 行
   详见 docs/06-skins.md
   ========================================================================== */

/* ==========================================================================
   皮肤：Aurora · 极光（深空蓝紫 + 青色高光）
   设计意图：深空蓝底 + 蓝紫渐变主色 + 青绿点缀，科技感强，
            与游戏内容（彩色封面）对比清晰，长时间浏览不刺眼。
   ========================================================================== */
:root[data-skin="aurora"] {
  color-scheme: dark;

  /* 品牌色：蓝 → 紫渐变 */
  --color-primary: #4c8dff;
  --color-primary-dark: #2f6fe0;
  --color-primary-hover: #7aa8ff;
  --color-primary-soft: rgba(76, 141, 255, 0.16);
  --color-accent: #2ee6c5;          /* 青色高光：评分、重点提示 */

  /* 平台标识 */
  --color-wx: #07c160;
  --color-dy: #25f4ee;

  /* 中性色 */
  --color-bg: #070b18;
  --color-bg-alt: #0d1425;
  --color-card: #121a2e;
  --color-card-hover: #182341;
  --color-border: #22304d;
  --color-border-strong: #2e3f63;
  --color-text: #e7edff;
  --color-text-sub: #9aa8c7;
  --color-text-dim: #8494b5;

  /* 组件底色（透明叠加层，深色皮肤需要自带底色） */
  --color-header-bg: rgba(7, 11, 24, 0.92);
  --color-toast-bg: rgba(18, 26, 46, 0.96);
  --color-skeleton-1: #121a2e;
  --color-skeleton-2: #1b2743;
  --color-surface-2: #0d1425;

  /* 渐变 */
  --gradient-bg: linear-gradient(160deg, #070b18 0%, #0d1730 45%, #070b18 100%);
  --gradient-primary: linear-gradient(45deg, #4c8dff, #7a5cff);
  --gradient-card: linear-gradient(145deg, #121a2e, #17223c);
  --gradient-info: linear-gradient(45deg, #4c8dff, #2ee6c5);

  /* 阴影 */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 8px 24px rgba(76, 141, 255, 0.28);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   皮肤：Daylight · 晨曦（浅色）
   设计意图：白天/户外/办公室场景可读性更好，白底+蓝主色，
            卡片用极浅阴影分层，避免大面积纯白刺眼。
   ========================================================================== */
:root[data-skin="light"] {
  color-scheme: light;

  /* 品牌色 */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: rgba(37, 99, 235, 0.10);
  --color-accent: #b45309;          /* 由 #d97706 加深：浅底上原值对比度仅 3.19:1，不达 AA */

  /* 平台标识（浅色底上用深色版本，保证 11px 徽标可读性 ≥4.5:1） */
  --color-wx: #047857;              /* 由 #059669 加深：原值 3.77:1 */
  --color-dy: #161823;

  /* 中性色 */
  --color-bg: #f4f6fb;
  --color-bg-alt: #ffffff;
  --color-card: #ffffff;
  --color-card-hover: #f8faff;
  --color-border: #e3e8f2;
  --color-border-strong: #cbd5e8;
  --color-text: #17203a;
  --color-text-sub: #5a6785;
  --color-text-dim: #5f6d8a;

  /* 组件底色 */
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-toast-bg: rgba(255, 255, 255, 0.98);
  --color-skeleton-1: #eef1f7;
  --color-skeleton-2: #e2e8f5;
  /* 浅色皮肤：次级表面用浅灰（--color-bg-alt 在这里是纯白，不能用于徽标底色） */
  --color-surface-2: #eef2f9;

  /* 渐变 */
  --gradient-bg: linear-gradient(180deg, #f7f9fd 0%, #eef2fa 100%);
  --gradient-primary: linear-gradient(45deg, #2563eb, #4f8cff);
  --gradient-card: linear-gradient(145deg, #ffffff, #f8faff);
  --gradient-info: linear-gradient(45deg, #2563eb, #06b6d4);

  /* 阴影：浅色皮肤用更轻的阴影，避免"脏" */
  --shadow-card: 0 2px 10px rgba(24, 39, 75, 0.08);
  --shadow-hover: 0 8px 22px rgba(37, 99, 235, 0.18);
  --shadow-header: 0 2px 10px rgba(24, 39, 75, 0.10);
}

/* 浅色皮肤下的局部适配（图像上的文字仍需白色，故单独处理） */
:root[data-skin="light"] .gh-banner__caption,
:root[data-skin="light"] .gh-banner__ad,
:root[data-skin="light"] .gh-banner__close {
  color: #ffffff;
}

:root[data-skin="light"] .gh-lightbox {
  background: rgba(12, 18, 34, 0.86);
}

:root[data-skin="light"] .gh-toast {
  border-color: var(--color-border-strong);
}