/* ============================================
   Design Tokens — 设计令牌
   All visual values live here as CSS custom properties
   ============================================ */

:root {
  /* ---- Colors: Background ---- */
  --clr-bg-deep:    #06060f;
  --clr-bg-primary: #0c0c1d;
  --clr-bg-elevated: rgba(255, 255, 255, 0.03);
  --clr-bg-card:    rgba(255, 255, 255, 0.04);

  /* ---- Colors: Glass ---- */
  --clr-glass-bg:      rgba(255, 255, 255, 0.04);
  --clr-glass-border:  rgba(255, 255, 255, 0.08);
  --clr-glass-hover:   rgba(255, 255, 255, 0.07);
  --clr-glass-bg-heavy: rgba(12, 12, 29, 0.75);

  /* ---- Colors: Accent ---- */
  --clr-accent-1:  #6c5ce7;   /* Purple  — primary */
  --clr-accent-2:  #00cec9;   /* Teal    — secondary */
  --clr-accent-3:  #fd79a8;   /* Pink    — highlights */

  /* ---- Colors: Accent Glows ---- */
  --glow-purple: 0 0 30px rgba(108, 92, 231, 0.4);
  --glow-teal:   0 0 30px rgba(0, 206, 201, 0.3);
  --glow-pink:   0 0 20px rgba(253, 121, 168, 0.3);

  /* ---- Colors: Text ---- */
  --clr-text-primary:   #f0f0f5;
  --clr-text-secondary: #a0a0b8;
  --clr-text-muted:     #6b6b80;

  /* ---- Colors: Gradients ---- */
  --gradient-hero:   linear-gradient(135deg, #0c0c1d 0%, #1a1040 50%, #0c0c1d 100%);
  --gradient-accent: linear-gradient(135deg, var(--clr-accent-2), var(--clr-accent-1));
  --gradient-accent-reverse: linear-gradient(135deg, var(--clr-accent-1), var(--clr-accent-3));
  --gradient-timeline: linear-gradient(180deg, var(--clr-accent-1), var(--clr-accent-2), var(--clr-accent-3));

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 40px rgba(108, 92, 231, 0.3);
  --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.25);

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   100px;
  --radius-full: 50%;

  /* ---- Z-index ---- */
  --z-particles: 0;
  --z-content:   1;
  --z-overlay:   900;
  --z-nav:       1000;

  /* ---- Transitions ---- */
  --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Spacing ---- */
  --section-gap: 100px;
  --container-max: 1200px;
  --container-narrow: 800px;
}