:root,
.theme-scope {
  /* 图像上的标题遮罩保持跨品牌可读性。 */
  --media-label-text: #fff;
  --media-control-border: rgb(255 255 255 / 0.4);
  --media-notice-bg: rgb(0 0 0 / 0.68);
  --media-play-wash: linear-gradient(
    180deg,
    transparent 45%,
    rgb(0 0 0 / 0.35)
  );
  --media-label-gradient: linear-gradient(
    180deg,
    transparent 35%,
    rgb(0 0 0 / 0.75)
  );

  --color-scheme: dark;
  /* 品牌与基础色由 site.config.ts 经 html 的 style 属性注入。 */
  --primary: var(--accent-from);
  --focus: var(--accent-from);
  --accent-gradient: linear-gradient(
    115deg,
    var(--accent-from),
    var(--accent-to)
  );
  --bg-bottom: color-mix(in srgb, var(--bg) 84%, black);
  --text-secondary: color-mix(in srgb, var(--text) 80%, transparent);
  /* 弱提示也承载时间、来源和身份信息，避免叠加透明度后失去可读对比度。 */
  --text-subtle: var(--text-muted);
  --surface-subtle: rgb(255 255 255 / 0.025);
  --surface: rgb(255 255 255 / 0.045);
  --surface-strong: rgb(255 255 255 / 0.075);
  --surface-hover: rgb(255 255 255 / 0.09);
  --border-subtle: rgb(255 255 255 / 0.07);
  --border: rgb(255 255 255 / 0.11);
  --border-strong: rgb(255 255 255 / 0.2);
  --control-bg: color-mix(in srgb, var(--bg) 82%, var(--bg-elevated));
  --control-text: var(--text);
  --control-border: color-mix(in srgb, var(--text) 40%, transparent);
  --overlay: rgb(0 0 0 / 0.7);
  /* 状态色保持独立，避免更换品牌色后改变业务含义。 */
  --danger: #fca5a5;
  --success: #5eead4;
  --warning: #fde68a;
  --glow-a: color-mix(in srgb, var(--accent-to) 22%, transparent);
  --glow-b: color-mix(in srgb, var(--accent-from) 16%, transparent);
  --glow-c: color-mix(in srgb, var(--accent-warm) 10%, transparent);
  --shadow-inset: 0 1px 0 rgb(255 255 255 / 0.045) inset;
  --shadow-panel: var(--shadow-inset), 0 8px 24px -20px rgb(0 0 0 / 0.7);
  --shadow-header: 0 1px 0 var(--border-subtle);
  /* 默认装饰集中在这里，项目可直接替换背景、模糊和阴影。 */
  --page-background: var(--bg);
  --page-wash: none;
  --panel-background: color-mix(in srgb, var(--bg-elevated) 92%, var(--bg));
  /* 普通卡片只绘制自身表面，避免视频帧更新引发跨卡片背景采样。 */
  --panel-backdrop-filter: none;
  /* 弹窗承载正文与操作，不依赖背景模糊来遮住底层页面。 */
  --dialog-background: var(--bg-elevated);
  --header-background: color-mix(in srgb, var(--bg) 96%, transparent);
  --header-backdrop-filter: blur(12px);
  --progress-background: color-mix(
    in srgb,
    var(--bg-elevated) 86%,
    var(--bg-mid)
  );
  --cta-background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--accent-from) 6%, var(--bg-elevated)),
    color-mix(in srgb, var(--accent-to) 2%, var(--bg-elevated))
  );
  --proof-background: color-mix(in srgb, var(--bg-mid) 92%, var(--accent-from));
  --glass-surface: color-mix(in srgb, var(--bg) 88%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 24%, transparent);
  /* 运营总览的局部材质，表格与编辑表单保持不透明。 */
  --admin-overview-background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent-from) 5%, var(--bg-elevated)),
    var(--bg-elevated)
  );
  --admin-overview-art: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-from) 13%, var(--bg-elevated)),
    color-mix(in srgb, var(--accent-to) 5%, var(--bg-elevated))
  );
  --admin-contour: color-mix(in srgb, var(--primary) 15%, transparent);
  --admin-selected: color-mix(in srgb, var(--primary) 8%, var(--bg-elevated));
  --menu-background: var(--bg-elevated);
  --menu-backdrop-filter: none;
  --overlay-backdrop-filter: blur(4px);
  --primary-border: color-mix(in srgb, var(--accent-from) 70%, var(--text));
  --shadow-primary:
    0 1px 0 rgb(255 255 255 / 0.25) inset, 0 1px 2px rgb(0 0 0 / 0.16),
    0 6px 16px -10px color-mix(in srgb, var(--primary) 40%, transparent);
  --shadow-primary-hover:
    0 1px 0 rgb(255 255 255 / 0.4) inset, 0 2px 4px rgb(0 0 0 / 0.18),
    0 8px 20px -10px color-mix(in srgb, var(--primary) 45%, transparent);
  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.16), var(--shadow-inset);
  --shadow-menu: 0 16px 40px -12px rgb(0 0 0 / 0.5), var(--shadow-inset);
  --shadow-dialog: 0 32px 96px -24px rgb(0 0 0 / 0.65), var(--shadow-inset);
  --control-height: 44px;
  --panel-padding: 20px;
  --layout-gap: 20px;
  --page-padding-block: 24px;
  --section-spacing: 64px;
  --radius-badge: 9999px;
  --radius-control: 10px;
  --radius-panel: 20px;
  --radius-menu: 14px;
  --radius-button: 10px;
  /* 显式交付系统字体；双语字形按平台提供，不声明未加载的网络字体。 */
  --app-font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Microsoft YaHei', sans-serif;
  --app-font-display: var(--app-font-sans);
  --font-size-body: 1rem;
  --font-size-control: 0.875rem;
  --font-size-caption: 0.8125rem;
  --font-size-meta: 0.75rem;
  --line-height-body: 1.65;
}

/* 明暗由服务端输出的产品配置选择，避免构建器降级动态 light-dark() 时丢失颜色。 */
:root[data-color-scheme='light'],
.theme-scope[data-color-scheme='light'] {
  --color-scheme: light;
  --bg-bottom: color-mix(in srgb, var(--bg) 84%, white);
  --surface-subtle: rgb(0 0 0 / 0.02);
  --surface: rgb(0 0 0 / 0.035);
  --surface-strong: rgb(0 0 0 / 0.055);
  --surface-hover: rgb(0 0 0 / 0.07);
  --border-subtle: rgb(0 0 0 / 0.065);
  --border: rgb(0 0 0 / 0.1);
  --border-strong: rgb(0 0 0 / 0.2);
  --control-bg: var(--bg-elevated);
  --control-border: color-mix(in srgb, var(--text) 55%, transparent);
  --shadow-inset: 0 1px 0 rgb(255 255 255 / 0.8) inset;
  --shadow-panel:
    var(--shadow-inset), 0 1px 3px rgb(0 0 0 / 0.025),
    0 12px 32px -24px rgb(0 0 0 / 0.2);
  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.06), var(--shadow-inset);
  --shadow-menu:
    0 2px 6px rgb(0 0 0 / 0.04), 0 18px 48px -16px rgb(0 0 0 / 0.18),
    var(--shadow-inset);
  --shadow-dialog:
    0 4px 12px rgb(0 0 0 / 0.04), 0 32px 96px -24px rgb(0 0 0 / 0.24),
    var(--shadow-inset);
  --danger: #b91c1c;
  --success: #047857;
  --warning: #92400e;
}

@media (min-width: 768px) {
  :root,
  .theme-scope {
    --panel-padding: 24px;
    --layout-gap: 24px;
    --page-padding-block: 32px;
    --section-spacing: 80px;
  }
}