:root {

  /* COLORS */

  --color-bg: #050505;
  --color-surface: #101010;

  --color-text: #ffffff;
  --color-text-muted: rgba(255,255,255,.68);

  --color-border: rgba(255,255,255,.06);

  --color-accent: #3B82F6;
  --color-accent-hover: #2563EB;

  /* TYPOGRAPHY */

  --font-primary: 'Inter', sans-serif;

  /* CONTAINER */

  --container-width: 1240px;

  /* RADIUS */

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 40px;

  /* SPACING */

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* SHADOW */

  --shadow-sm: 0 4px 12px rgba(0,0,0,.15);

  --shadow-md: 0 10px 30px rgba(0,0,0,.25);

}