/* 黄瓜视频 · App 设计令牌（深色影视风 · 手机优先） */
:root {
  --app-bg: #0b0b0f;
  --app-bg-elevated: #121218;
  --app-surface: #15151c;
  --app-surface-2: #1c1c26;
  --app-surface-3: #242430;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.14);
  --app-text: #f4f4f7;
  --app-text-secondary: #a1a1b2;
  --app-text-muted: #6e6e80;
  --app-accent: #ff2d78;
  --app-accent-soft: rgba(255, 45, 120, 0.16);
  --app-gold: #f5c518;
  --app-gold-soft: rgba(245, 197, 24, 0.18);
  --app-success: #34d399;
  --app-danger: #fb7185;
  --app-overlay: rgba(0, 0, 0, 0.55);
  --app-glass: rgba(18, 18, 24, 0.78);
  --app-glass-border: rgba(255, 255, 255, 0.1);

  --app-radius-sm: 10px;
  --app-radius: 16px;
  --app-radius-lg: 22px;
  --app-radius-pill: 999px;

  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;

  --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --app-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  --app-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --app-glow-accent: 0 0 24px rgba(255, 45, 120, 0.28);

  --app-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --app-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --app-dur: 220ms;
  --app-dur-fast: 140ms;

  --app-font: "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --app-font-display: "Outfit", "Noto Sans SC", sans-serif;

  --app-header-h: 56px;
  --app-tabbar-h: 64px;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-content-max: 1200px;

  /* 兼容旧变量：默认走 App 深色皮 */
  --header-bg: #0a0a0e;
  --header-text: var(--app-text);
  --header-muted: var(--app-text-secondary);
  --brand-yellow: var(--app-gold);
  --accent-pink: var(--app-accent);
  --sub-bg: var(--app-surface-2);
  --content-bg: var(--app-bg);
  --card-bg: var(--app-surface);
  --text-dark: var(--app-text);
  --text-muted: var(--app-text-secondary);
  --pill-bg: var(--app-surface-2);
  --pill-border: var(--app-border);
  --font: var(--app-font);
  --sticky-header-h: var(--app-header-h);
}

/* 浅色仅作次要模式，仍保持 App 圆角与密度，避免回退成灰白表格 */
html.light {
  --app-bg: #f3f2f7;
  --app-bg-elevated: #ffffff;
  --app-surface: #ffffff;
  --app-surface-2: #f7f6fb;
  --app-surface-3: #eceaf3;
  --app-border: rgba(20, 16, 40, 0.08);
  --app-border-strong: rgba(20, 16, 40, 0.14);
  --app-text: #16141f;
  --app-text-secondary: #5c586c;
  --app-text-muted: #8b8799;
  --app-glass: rgba(255, 255, 255, 0.82);
  --app-glass-border: rgba(20, 16, 40, 0.08);
  --app-overlay: rgba(10, 8, 20, 0.4);
  --app-shadow-sm: 0 2px 10px rgba(20, 16, 40, 0.06);
  --app-shadow: 0 10px 30px rgba(20, 16, 40, 0.1);
  --content-bg: var(--app-bg);
  --card-bg: var(--app-surface);
  --text-dark: var(--app-text);
  --text-muted: var(--app-text-secondary);
  --sub-bg: var(--app-surface-2);
  --pill-bg: var(--app-surface);
  --pill-border: var(--app-border);
}

html.dark {
  color-scheme: dark;
}