:root {
  /* Backgrounds */
  --bg-base: #030712;
  --bg-section: #060d1f;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(91, 127, 255, 0.08);
  --bg-nav: rgba(3, 7, 18, 0.85);

  /* Primary accent */
  --color-primary: #5b7fff;
  --color-primary-hover: #7a99ff;
  --color-primary-glow: rgba(91, 127, 255, 0.35);
  --color-primary-dim: rgba(91, 127, 255, 0.15);

  /* Secondary accents */
  --color-cyan: #22d3ee;
  --color-purple: #a855f7;
  --color-teal: #00b884;
  --color-red: #ef4444;

  /* Text */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #4b5563;

  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-primary: rgba(91, 127, 255, 0.3);

  /* Gradients */
  --grad-hero: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(91, 127, 255, 0.25) 0%, transparent 70%);
  --grad-text: linear-gradient(135deg, #5b7fff 0%, #22d3ee 100%);
  --grad-card: linear-gradient(135deg, rgba(91, 127, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100%);

  /* Typography */
  --font-sans: "Inter", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Spacing */
  --container-width: 1200px;
  --section-pad-y: 120px;
  --container-px: 24px;
  --header-height: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Effects */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-glow: 0 0 40px var(--color-primary-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 400ms ease;
}