:root {
  /* Colors */
  --color-bg: #0a0e17;
  --color-bg-raised: #111827;
  --color-bg-card: #151d2e;
  --color-surface: #1a2332;
  --color-border: #1e293b;
  --color-border-hover: #2d3f56;

  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;

  --color-accent: #4fd1c5;
  --color-accent-dim: rgba(79, 209, 197, 0.15);
  --color-accent-glow: rgba(79, 209, 197, 0.3);
  --color-secondary: #805ad5;
  --color-secondary-dim: rgba(128, 90, 213, 0.15);
  --color-tertiary: #3182ce;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:
    0 4px 20px rgba(79, 209, 197, 0.12), 0 1px 6px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(79, 209, 197, 0.15);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  position: relative;
}

#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.site-header,
.main,
.site-footer {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}