:root {
  /* Background layers */
  --bg-deep: #0a0a0f;
  --bg-section: #0f1019;
  --bg-section-alt: #111520;
  --bg-surface: #1a1b2e;
  --bg-surface-hover: #222440;

  /* Text hierarchy */
  --text-primary: #e8e6e3;
  --text-secondary: #9b97a0;
  --text-tertiary: #5a5660;

  /* Accent colors */
  --accent-primary: #6c5ce7;
  --accent-secondary: #00cec9;
  --accent-warm: #e17055;
  --accent-gradient: linear-gradient(135deg, #6c5ce7, #00cec9);

  /* Functional */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-visible: rgba(255, 255, 255, 0.12);
  --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.15);

  /* Spacing (8px base) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Font stacks */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --font-body: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* Size scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.75rem;
  --text-3xl: 4rem;
  --text-4xl: 6rem;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.8;
  --leading-loose: 2.0;
}

body {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

::selection {
  background: rgba(108, 92, 231, 0.3);
  color: var(--text-primary);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}