:root {
  /* Typography */
  --font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Harmonious Dark Mode Color Palette (HSL Tailored) */
  --bg-deep: hsl(224, 25%, 6%);
  --bg-surface: hsl(224, 20%, 10%);
  --bg-surface-elevated: hsl(224, 18%, 15%);
  --bg-surface-highlight: hsl(224, 15%, 22%);
  
  /* Monochrome / Black and White Accent */
  --color-accent: hsl(0, 0%, 100%); /* Solid White */
  --color-accent-hover: hsl(0, 0%, 80%);
  --color-accent-glow: rgba(255, 255, 255, 0.15);
  --color-accent-dim: rgba(255, 255, 255, 0.08);

  /* Secondary & Status Colors */
  --color-blue: hsl(199, 89%, 48%);
  --color-pink: hsl(330, 81%, 60%);
  --color-red: hsl(354, 70%, 54%);
  --color-success: hsl(145, 63%, 49%);
  
  /* Text Color Hierarchy */
  --text-primary: hsl(210, 40%, 98%);
  --text-secondary: hsl(215, 20%, 75%);
  --text-muted: hsl(215, 12%, 50%);
  --text-dim: hsl(215, 10%, 35%);
  
  /* Layout Spacing */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
  
  /* Glassmorphic Shadows & Borders */
  --glass-bg: rgba(18, 20, 26, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-focus: rgba(255, 255, 255, 0.25);
  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glow-shadow: 0 0 20px var(--color-accent-glow);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-family);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}