/* ============================================================
   Backpack Premium HTML — Design Tokens
   Backpack 官方品牌色 (#E33E3F) + Premium Dark/Light dual theme
   本地字体：Plus Jakarta Sans (woff2)
   ============================================================ */
:root {
  /* ----- Backgrounds (Dark default) ----- */
  --bg-0: #0B0B0F;
  --bg-1: #121217;
  --bg-2: #181820;
  --bg-3: #1F1F28;
  --bg-glass: rgba(18, 18, 23, 0.6);

  /* ----- Surfaces ----- */
  --surface-card: #181820;
  --surface-elevated: #1F1F28;
  --surface-inset: #0B0B0F;

  /* ----- Borders ----- */
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(227, 62, 63, 0.45);

  /* ----- Text ----- */
  --text-primary: #F4F4F6;
  --text-secondary: #C7C7CC;
  --text-tertiary: #8E8E93;
  --text-muted: #6E6E73;
  --text-faint: #48484A;

  /* ----- Backpack Brand (官方红色) ----- */
  --brand-500: #E33E3F;
  --brand-400: #F25253;
  --brand-600: #C42F30;
  --brand-700: #A82829;
  --brand-glow: rgba(227, 62, 63, 0.28);
  --brand-wash: rgba(227, 62, 63, 0.10);

  /* ----- Accents ----- */
  --accent-blue: #4A9EFF;
  --accent-amber: #F5A524;
  --accent-green: #34C759;
  --accent-purple: #A78BFA;
  --accent-rose: #FF453A;
  --accent-teal: #5AC8FA;

  /* ----- Gradients ----- */
  --grad-brand: linear-gradient(135deg, #E33E3F 0%, #B82829 100%);
  --grad-soft: linear-gradient(180deg, rgba(18,18,23,0) 0%, rgba(11,11,15,1) 100%);
  --grad-mesh: radial-gradient(60% 50% at 20% 20%, rgba(227,62,63,0.16) 0%, rgba(227,62,63,0) 60%),
               radial-gradient(50% 50% at 80% 10%, rgba(74,158,255,0.10) 0%, rgba(74,158,255,0) 60%),
               radial-gradient(60% 60% at 50% 100%, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0) 60%);
  --grad-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);

  /* ----- Shadows ----- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(227, 62, 63, 0.35), 0 12px 40px rgba(227, 62, 63, 0.22);

  /* ----- Radii ----- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ----- Spacing scale ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ----- Typography (local Plus Jakarta Sans) ----- */
  --font-display: "Plus Jakarta Sans", "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;

  --lh-tight: 1.15;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  --letter-tight: -0.025em;
  --letter-base: -0.01em;
  --letter-wide: 0.08em;

  /* ----- Layout ----- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 250ms;
  --d-slow: 420ms;
}